组件的通讯方式常用的有:
1、props和$emit(常用);
2、$attrs和$listeners;
3、中央事件总线(非父子组件间通信);
4、v-model;
5、provide和inject;
6、$parent和$children;
7、vuex;
1、props和$emit(常用)
主要用于父子组件之间的通讯;
父传子:在子组件上绑定父组件的参数,子组件通过props关键字接收;
子传父:在子组件绑定的方法中调用this.$emit(‘父组件的方法名’,‘子组件传给父组件的参数值’)
2、$attrs和$listeners
第一种方法只适用于父子组件之间的通讯,对于父子孙组件或者更多级的嵌套再用第一种方法就会变得过于复杂。所以,vue2.4就推出了$attrs和$listeners来解决这个问题,可以实现父组件直接传值给孙子组件。
用法如下:
父组件传值给孙子组件:
1)在子组件上绑定父组件要传递给子组件和孙子组件的参数,父组件传递给子组件的参数,子组件可以通过props来获取,而没有在props中声明的参数会自动保存到$attrs对象中。
2)在孙子组件上绑定$attrs参数
3)在孙子组件中可直接通过$attrs.参数名来获取父组件传递给孙子组件的参数
孙子组件传值给父组件:
1)在孙子组件的方法中使用this.$emit('父组件中的方法名',’孙子组件传递给父组件的参数')来传值。
2)在子组件上绑定方法$listeners,用来监听孙子组件的$emit事件,通知到父组件。
3、中央事件总线(非父子组件间通信: 跨级和兄弟组件通信 )
上面两种方式处理的都是父子组件之间的数据传递,而如果两个组件不是父子关系呢?这种情况下可以使用中央事件总线的方式。新建一个Vue事件bus对象,然后通过bus.$emit触发事件,bus.$on监听触发的事件。
中央事件总线- 就是一个名字可以叫做bus的vue空实例,里边没有任何内容;
1)定义bus文件
2)使用
发送消息:
接收消息:
注意:也可以将bus挂载到全局使用,在main.js中添加以下代码
使用时直接调用就可以了,this.$bus.$emit(),this.$bus.$on()
4、v-model
父组件通过v-model传递值给子组件时,会自动传递一个value的prop属性,在子组件中通过this.$emit(‘input',val)自动修改v-model绑定的值
5、provide和inject
在 Vue.js 的2.2.0+版本中添加加了 provide 和 inject 选项。他们成对出现,用于父级组件向下传递数据。
父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据,只要在父组件的生命周期内,子组件都可以调用。
1)父组件通过provide提供变量
2)子组件或者更深层级的组件通过reject获取参数
6、$parent和$children
在组件内部可以直接通过子组件$parent对父组件进行操作,父组件通过$children对子组件进行操作.