vue组件间传值详解
1.父传子----传值要点:
《1》
在组件注册的时候必须要使用 return 去返回 data对象;
《2》
把父级的数据传递给子集; props;
《3》
子集要允许父级传递的数据。 用 props接受一下数据的传递;
2.子传父
《第一种方法:终极保命方法》:
父组件里的数据直接写在一个对象里,把这个地址传给子组件,因为地址是不会变的,所有在子组件里改这个地址里的数据,那么这个地址里的数据就被改变了,那么子组件的值就传递给了父组件,也就是说让父组件和子组件共享一个数据地址;
《第二种方法---ref链》:
组件内部的this指向这个组件本身,组件的根root指向Vue实例;根root中children是Vue下的组件;调动组件时,给父组件加的ref属性将挂载到Vue实例上
《第三种方法》
在父组件定义一个函数,传给子组件该函数,子组件将数据作为该函数的参数调用,通过该函数就传递了子元素的数据,从而达到了子组件向父组件传值的目的。
示例:
《第四种方法----在第三种方法的基础上进行简化,不需要用props接收,而用emit接收父组件传来的函数》
emit可以直接调用父组件传来的函数,第一个参数是函数名字,第二个参数是子元素传进去的参数。
同级组件之间的传值-----事件总线:
Vue实例化里面有个_events,是储存自定义事件的地方,用
的方式可以把自定义事件存储到里面;
利用这个特性可以实现同级组件之间的传值;
博主掘金技术社区地址——https://juejin.cn/user/1908407918660871/posts