Vue组件之间通信的七种方式

使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。

父子组件之间的通信

1）props和$emit 父组件通过props将数据下发给props,子组件通过$emit来触发自定义事件来通知父组件进行相应的操作 具体代码如下:

// 父组件

props和$emit

importChildrenfrom'./children';exportdefault{    data() {return{msg:'传递的值'}    },components: {        Children    },methods: {        changeMsg(val) {this.msg = val;        }    }}// 子组件

{{msg}}

exportdefault{    data(){return{        }    },props: ['msg'],methods: {        notify() {this.$emit('changeMsg','修改后的');        }    }}

2)vm.$parent和vm.$children

vm.$parent: 父实例,如果当前实例有的话 vm.$children: 获取当前实例的直接直接子组件,需要注意的是$children并不保证顺序,也不是响应式的 具体代码如下: 

// 父组件的代码

{{title}}

importChildrenfrom'./children.vue';exportdefault{    data() {return{title:'父组件'}    },components: {        Children    },methods: {        amend() {this.$children[0].title ='修改后的子组件标题';        }    }}// 子组件的代码

{{title}}

exportdefault{    data() {return{title:'子组件'}    },methods: {        amend() {this.$parent.title ='修改后的父组件标题';        }    }}

3)自定义事件的v-model ，具体代码如下:

// 父组件

标题:

importChildrenfrom'./children.vue';exportdefault{    data() {return{mymessage:'名字',        }    },components: {        Children    }}// 子组件

exportdefault{model: {prop:'mymessage',event:'input'},props: ['mymessage'],methods: {        changeValue(event){this.$emit('input', event.target.value);        }    }}

祖先组件和其子孙组件通信

1)provide/inject provide/inject

允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下文关系成立的时间里始终生效 https://cn.vuejs.org/v2/api/#provide-inject 具体代码如下:

// 父组件

{{title}}

importChildrenfrom'./children.vue';exportdefault{    data() {return{title:'父组件的标题'}    },    provide() {return{updateTitle:this.updateTitle        }    },methods: {        updateTitle(title) {this.title = title;        }    },components: {        Children    }}// 子组件

修改父组件的属性

importGrandsonfrom'./grandson.vue';exportdefault{    data() {return{                    }    },inject: ['updateTitle'],methods: {        changeAttr() {this.updateTitle('子组件修改标题');        }    },components: {        Grandson    }}// 孙组件

修改祖先组件的属性

exportdefault{inject: ['updateTitle'],methods: {        changeAttr() {this.updateTitle('孙组件修改标题');        }    }}

2)$attrs和$listeners

组件A下面有一个组件B,组件B下面有一个组件C,如果想将组件A的数据和自定义事件传递给组件C,就可以使用$attrs和$listeners。 

vm.$attrs: 当一个组件没有声明任何 prop 时(没有在props声明属性)，这里会包含所有父作用域的绑定 ，并且可以通过 v-bind="$attrs" 传入内部组件

vm.$listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。

具体代码如下: 

// 父组件

importChildrenfrom'./children';exportdefault{    data() {return{msg:'下发数据',test:'123'}    },components: {        Children    },methods: {        changeMsg() {this.msg ='修改后的数据';        }    }}// 子组件

importGrandsonfrom'./grandson';exportdefault{components: {        Grandson    }}// 孙组件

{{$attrs.msg}}

exportdefault{    data() {return{        }    },methods: {        change() {this.$emit('changeMsg')        }    }}

非父子组件之间的通信

通过中央事件总线来进行通信 通过新建一个Vue事件的bus对象,然后通过bus.$emit来触发事件,bus.$on监听触发的事件。使用中央事件总线时,需要在手动清除它,不然它会一直存在,原本只执行一次的操作,将会执行多次。 具体代码如下:  

// 父组件

importOnefrom'./one.vue';importTwofrom'./two.vue';exportdefault{    data() {return{        }    },components: {        One,        Two    }}// one组件

第一个组件

import{BUS}from'./index.js';exportdefault{    data() {return{        }    },methods: {        add() {            BUS.$emit('add');        }    },    beforeDestory() {        BUS.$off('add');    }}// two组件

第二个组件

数量: {{num}}

import{BUS}from'./index.js';exportdefault{    data() {return{num:1}    },    mounted() {        BUS.$on('add', () => {this.num +=1;        })    },    beforeDestroy() {        BUS.$off('add');    }}// index.js 创建的busimport Vue from 'vue';export const BUS = new Vue({})

通过vuex来进行数据管理,具体内容见vuex官网