Vue3—05—组件通信

 

 一、父传子

1.基于props的attribute

当是一个基本数据类型时，随便；初始化多个组件实例时，虽然基本数据类型的值相同但是地址都初始化了不同，只是值进行了拷贝，所以修改本实例数据地址的值不会影响其他实例的值；

当是一个引入数据类型时，需要返回一个函数，不然会造成多个组件实例修改同一份数据的情况；原因是大家的地址里保存的不是值，而是一个相同的引用地址，而这个引用地址相同的话，那么修改时又会相同；如果每次初始化一个函数，那么每次引用地址都不会相同；

 2.基于非props的attribute

首先如果只有一个根节点，默认绑定在子组件template模板的根节点上

其次如果只有一个根节点并且不希望默认绑定在根节点上，需要inheritAttrs.false禁用，然后在标签里通过v-bind的￥attrs来调用

最后如果有多个根节点，则必须指定某个根节点；

 

 

 

 

 

 

二、子传父

 

 

 

 

 

 

 

 

三、父孙组件（非父子组件）

 

 

需要使用provide()代替provie{}, 因为对象里的方法是有this的，而这个this指向的是对象，再加上vue的代理this=this.data，所以就可以访问到data里的数据了；

 

 

 

 

 

 

四、兄弟组件之间的数据传递

这个一般用vuex，后续会讲到；

 

 

五、没有关系的组件的数据传递

这个时候可以使用全局事件总线，我们这里使用库miit；

emmit（）方法是发送消息

on（）方法是监听某个消息，接受数据，和子传父的使用方法类似；

off（）方法可以取消某个监听

all.clear()方法是取消所有监听