vue-八种实现组建通信的方法

组件通信、props 父组件--->子组件通信、$emit 子组件--->父组件传递

$emit与props结合 兄弟组件传值、bus(事件总线) 兄弟组件通信、children 直接访问组件实例、$refs、provide/inject(提供/注入) 多组件或深层次组件通信、vuex状态管理、slot（slot-scope作用域插槽）

目录

组件通信

1、props 父组件--->子组件通信

2、$emit 子组件--->父组件传递$emit与props结合 兄弟组件传值

3、bus(事件总线) 兄弟组件通信

4、$parent、$children 直接访问组件实例

5、$refs

6、provide/inject(提供/注入) 多组件或深层次组件通信

7、slot（slot-scope作用域插槽） 子元素-->父元素（类似于通信）

8、vuex状态管理

父组件---属性的方式传值给子组件

子组件---props方式接收数据

子组件props接受的参数名称，要与父组件传递时定义的属性名一致

注意：

子组件不能够直接去修改父组件传递的值修改的：因为Vue的单向数据流机制，如果直接修改那父组件的值就被“污染”了。(props是单向绑定的(只读属性)：当父组件的属性变化时，将传导给子组件，但是反过来不会)

报错信息大概是：vue使用prop通信出错:Avoid mutating a prop directly since the value will be overwritten whenever the parent

解决方案：可以在子组件内定义一个变量mydata去接收fData数据

参数传递类型不确定是可以这么写：

子组件绑定自定义事件

$emit()第一个参数为：自定义的事件名称，第二个参数为：需要传递的数据

使用 $emit() 触发更改数据

子组件

父组件(子组件发送的事件名称，要和父组件接受的事件名称一致)

父组件引入两个子组件

父组件充当一个桥梁作用

父组件

子组件B改变，接收数据

子组件A接收数据

非父子组件或更多层级间组件间传值，在Vue中通过单独的事件中心来管理组件间的传值

创建一个公共的bus.js文件

暴露出Vue实例

传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)

接收数据方，在生命周期函数中，通过bus.$on(方法名,[params])来监听

销毁事件，在接受数据方，通过bus.$off(方法名)销毁之后无法监听数据

需要改变数据的组件中定义调用

另外一个组件中同样引入bus.js文件，通过$on监听事件回调

子组件通过---> $parent 获得父组件实例

父组件通过---> $children 获得子组件实例数组

子组件---this.$parent可以获取到父组件的方法、data的数据等，并可以直接使用和执行

父组件 --- 获取子组件实例的，并且获取的实例是一个数组形式,this.$children[0]才可以获取某个组件实例,并调用组件方法和数据

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。

父组件使用 $refs 获得组件实例

provide/inject详解

父组件使用 provide 注入数据

子组件使用 inject 使用数据

至此provideName这个变量可以提供给它其下的所有子组件，包括曾孙、孙子组件等，只需要使用 inject 就能获取数据

父组件不需要知道哪个组件使用它提供出去的数据

子附件不需要知道这个数据从哪里来

用作一个 (能被传递数据的)可重用模板，来代替已经渲染好的元素

在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样

注意：父级插槽接收内容是最外侧元素 ，必须要有属性slot-scope

子元素

父元素

相当于一个公共数据的仓库

提供一些方法管理仓库数据

官网