Vue组件间的通信

Vue组件间的通信，大致分为以下几种：

  1. 使用props属性。

  props主要用于父组件传递数据给子组件，是你可以在组件上注册一些自定义特性。当一个值传递给一个prop特性的时候，它就变成了那个组件实例的一个属性。这样在子组件就可以使用该该值。请注意：所有的prop都使得期父子prop之间形成了一个单向下行绑定，即父级prop的更新会向下流动到子组件，但是反过来就不行，子组件不能改变父组件的状态。

每次父组件发生更新时，子组件中所有的prop都会被刷新为最新的值。

在实例中演示如下： 

 ，

在父组件中引用 TodoList组件，使用 :todos  (v-bind:todos)传递一个数组，使用 :deleteTodo 传递一个函数，

子组件中使用props接收传入的参数，然后在本组件使用。无需再data中定义。 当传递函数给子组件，也就意味着， 子组件需要修改父组件的某一项值，但是无法自己修改，只能将 特定值(例如数组的某个角标 )传递或者不传参给父组件，通知父组件进行更新操作(例如删除 数组中的一个元素)。

  2. 使用Vue自定义事件。

 怎么使用呢？

   1.  父组件可以在使用子组件的地方直接用 v-on来监听子组件触发的事件 。即父组件中使用 v-on绑定自定义事件，然后在子组件中使用 $emit(eventName,data)触发事件。使用如下所示：

   

 addTodo是一个函数，函数的具体内容不再展示了， 在子组件通过$emit 来触发该事件。

 请注意： 该方式，仅仅用于父子组件传递，不适用于 三层及其以上

   2.  每个Vue对象实例都实现了事件接口，所以可以使用 $on(eventName)监听事件，使用$emit 来触发事件.

 父组件挂载的时候，为该子组件绑定监听事件：
 

子组件中还是通过 $emit 来触发事件。

3. 消息订阅与发布(PubSubJS库)

   订阅消息 PubSub.subscribe('msg',function(msg,data){} )

   发布消息 ： PubSub.publish('msg',data)

 注意：先要导入 PubSub组件   import PubSub from ‘pubsub-js’

// 订阅消息   
//PubSub.subscribe('deleteTodo',function(msg,data){ 
 //     this.deleteTodo(index) ; // 这样是存在问题的，是因为this使用的是回调函数中的，并不是外部的this ，于是，可以使用箭头函数，将外部this绑定
//})
PubSub.subscribe('deleteTodo', (msg,data) =>{// 箭头函数，绑定的是外部的this
  this.deleteTodo(index); 
})

在另一组件中发布消息：

// 注意先导入 PubSub

PubSub.publish('deleteTodo',index) // indx 为传入的数据

  注意： 1）优点：此方式可实现任意关系组件间通信(数据)

4. 组件间通信：Slot 

 此方式用于父组件向子组件传递"标签数据"。也即子组件先有一个"占位符", 等待父组件传入具体的标签，子组件在进行渲染。

   用法：

 子组件：

// 子组件  ：Child.vue
<template>
   <div>
      <slot name="xxx"> 不确定的标签结构1</slot> <!--定义架子，我理解为定义一个占位符 -->
      <div> 组件确定的标签结构</div>
      <slot name="yyy">不确定的标签结构2</slot>
   </div>
</template>

父组件：

// 父组件：Parent.vue
<child>
   <div slot="xxx">xxx对应的标签结构</div> <!-- 实际的标签结构-->
<div slot="yyy">yyy对应的标签结构</div> <!-- 实际的标签结构-->
</child>

注意： 因为传递的具体的标签是在父组件，所以操作也应该放在父组件中。也就是说应该在父组件运行好之后传入子组件，其所有的操作应该在父组件中进行。

如下所示，对子组件的这些操作，全部放入到父组件中：

 

5. vuex通信 ，暂时还没有掌握具体用法。请等待后续。。。。。