VUE-组件间通信方式

一、vue组件间的通讯方式

1.props

2.vue的自定义事件

自定义事件主要包括两个部分：
（1）监听事件

1. 绑定监听事件的方式一：通过v-on绑定，@

//给todoHeader 组件对象绑定addLists监听
<todoHeader @addLists="addLists"/>

2. 绑定监听事件的方式二：通过$on(eventName，回调函数)

//通过ref查找需要绑定的组件标签
 <todoHeader ref="header"/>

eventName是事件名称

//在初始化函数就绑定
mounted() {
    //给todaHeader标签绑定addlists 绑定监听
    this.$refs.header.$on('addLists',this.addLists);
},

（2）触发事件
1.触发事件的方式：$emit(eventName,data)

eventName：事件名，要与监听事件的名字一致
data：需要传递给监听事件的数据，在监听事件的回调函数中调用

this.$emit('addLists', lis);
//这里的this就是监听事件所绑定的那个标签组件

（3）自定义事件注意事项：

1. 这种方式只用于父子组件间发送消息（数据）
2. 隔代组件或者兄弟组件间通信不合适

3.消息订阅与发布（PubSubJS库）

先有发布（触发），再有订阅（监听）
1.下载PubSubJS库：npm install --save pubsub -js

2.查看信息：npm info pubsub-js

3.引入PubSubJS库：import Pubsub from 'pubsub-js'

4.在生命周期初始化中执行mounted(){}

（1）订阅消息-----Subs-------绑定监听
msg：消息名
data：接收发布消息的数据

PubSub.subscribe('msg', function(msg, data){
   //开始执行操作 
})

 Pubsub.subscribe('delLists',(msg,index) => {
            this.delLists(index);
        })

（2）发布消息-----Pubs-------触发事件

PubSub.publish('msg', data)

 Pubsub.publish('delLists',this.index)

（3）消息订阅与发布注意事项：

1. 此方法可实现任意关系组件间通信，无位置要求

4.slot

此方式用于父组件向子组件传递标签数据，通讯的是标签。
slot相当于一个插槽，子组件预留一个插槽位置，父组件来决定展示什么内容

（1）子组件：Child.vue

<template>
     <div class="todo-footer">
         <slot name="checkAll"></slot>
         <slot name="count"></slot>
         <slot name="delete"></slot>
     </div>
</template>

（2）父组件：Parent.vue

  <todo-footer>
        <input type="checkbox" v-model="checkAllBox" slot="checkAll"/>
        <span slot="count">已完成{{listsSize}}/ 全部{{lists.length}}</span>
        <button class="btn btn-danger" @click="deleteAll" v-show="listsSize" slot="delete">清除已完成任务</button>
    </todo-footer>

（3）注意：

1. 在子组件中会用到的计算属性都要放在父组件中，就相当于在父组件中把功能够完成了再直接放到了子组件的插槽中。

5.vuex