Vue2组件通信

目录

一，事件总线

二，props传递

三，this.$childern

四，$attrs收集

五，provide/inject依赖注入

六，slot 组件的内部分发

七，$listeners

---

一，事件总线

emit和on使用的是同一个主体，使用的是发布订阅模式

Vue.prototype.$bus = new Vue();//定义主题
this.$bus.$emit("eventAll");//发送事件
this.$bus.$on("eventAll", this.eventAll);//接收事件

二，props传递

组件上的传递

:msg='data'   //父亲
props:['data']  //孩子
$emit('event',data)  //订阅回调

三，this.$childern

this.$childern可以访问到子组件的实例，但因为组件存在异步的方式，所以无法保证子组件的顺序

this.$children[0].childrenFN() //father
childrenFN() {
     console.log('我是子组件的方法')
}// children

四，$attrs收集

vue规定:子组件内没有通过props的方式声明的数据，在组件是无法直接访问到的，这种数据会被收纳到$attres中去，子组件内使用$attres访问，可以减去props内部定义繁琐不美观的问题

msg2='没有在子组件的props定义'  //父亲
this.$attrs.msg2  //孩子

五，provide/inject依赖注入

能够实现祖先和后代之间的传值(依赖/注入),自组件接收，理论上不是响应式的数据，但可以传递应用数据，也可以传递this

provide() {
     return { foo: "父组件的provide数据" }; //想要传下去的值，实际上很少用，只限于ui库的开发
},//发送
inject: {smallChildren:{from:'foo'}}, // 接收 //设置别名 from 来自哪里，可以解决重名的问题

六，slot 组件的内部分发

组件的内部分发，如果在组件中声明的内容想在子组件中显示就要用到slot(弹窗，布局......)

匿名插槽 具名插槽 作用域插槽

<slot v-slot:name :params='参数'></slot>
<tmeplate  v-slot:name></tmeplate>
<tmeplate  v-slot:name='{params}'></tmeplate>

七，$listeners

隔代传播事件,$listeners会被展开，可以监听到父组件的事件

<vSon1 @father="father"/>  //父亲
<smallChildren v-on="$listeners" />  //孩子
<div @click="$emit('father')">孙子组件</div>  //孙子