vue组件通信的五种方式：props、绑定监听、pubsub订阅消息、slot插槽、vuex

1 组件逐层通信：props方式

v-bind数据绑定，用prop逐层传递
父组件

<template>
    //传函数
	<childen :toDo="toDo" />
</template>

<script>
...
	compontents:{
		childen 
	}
</script>

子组件

<script>
export default{
	props:{
			toDo:Function
			...
		}
}
</script>

2 父子间通信：自定义事件方式

以下是用自定义事件实现父子组件通信的两个过程：绑定事件监听和触发

①自定义事件监听

监听的两种方式：一是v-on,即@。二是vue对象函数的实例方法$on。

v-on监听（常用）

@eventName=“function”
父组件

<template>
   //<childen @toDo="toDo" />或
	<childen v-on:toDo="toDo" />
</template>

<script>
...
	compontents:{
		childen 
	}
</script>

$on监听（少用）

父组件

<template>
	  <childen ref="child"/>
</template>
<script>
...
   mounted(){ //执行异步代码
         this.$refs.child.$on('toDo',function)
        },
</script>

题外话：监听不是监视，监视是侦查具体属性的变化，可以自动执行。监视分有普通监视computed:{set(){}}和深度监视watch:{}

②用 $emit 触发自定义事件

用$emit触发事件，并返回数据到定义函数中执行回调函数
子组件

<script>
    export default {
	    ...
	    methods:{
	    const data = ...;
	    this.$emit('toDo',data)
	    }
    }
</script>

3 组件间通信：订阅和发布消息方式

订阅消息和发布消息可以实现跨组件通信，比前几个方式都方便许多，在代码编写上和“$on事件监听+$emit事件触发“格式类似。具体过程如下所示：

先在项目下安装pubsub-js库，库内包含subscribe订阅消息和publish发布消息方法。

npm install --save pubsub-js

在父组件中导入pubsub-js库后，将订阅消息 放在父组件的mounted中，执行异步代码

    import PubSub from  "pubsub-js"
    
    export default {
     mounted(){
          PubSub.subscribe('deleteTodo',
                (msg,index)=>this.deleteTodo(index)
                     )
        }
 	}
 	
    methods: {
    //自定义函数
           deleteTodo(index){
                console.log(index);
            }
    }
}

在子组件中同样导入pubsub-js库，然后发布消息

	import PubSub from 'pubsub-js'
    PubSub.publish('deleteTodo',index)

工作过程可以这样理解：
先在子组件中发布消息，其中deleteTo是消息名，index是通信数据。然后父组件订阅消息deleteTodo(可以理解为接收消息)，在订阅消息中的回调函数继续执行具体已定义的函数。

4 组件间通信：slot插槽

slot，译名插槽、站位。slot可以用来传标签，特别适合标签需要经常反复出现的组件，一个组件可以分好几个站位。
先在子组件emplate中写好插槽，并用name唯一标识插槽。如下所示就是三个不同的slot插槽checkAll、count、delete。

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

父组件在子组件中调用需要的插槽，不需要的就不调用。如下所示调用插槽checkAll、delete，未调用插槽count。

                <todo-footer>
                    <input type="checkbox" v-model="isAllCheck" slot="checkAll"/>
                    <button slot="delete" class="btn" v-show="isShow">完成</button>
                </todo-footer>

注意：所有与插槽有关的功能，都应该放在调用插槽结构的页面。如同此例，与v-show相关的isShow函数当放在父组件。

5 组件间通信：vuex (待更新…)