Vue组件间的通信
Vue组件间的通信，大致分为以下几种：
1. 使用props属性。
props主要用于父组件传递数据给子组件，是你可以在组件上注册一些自定义特性。当一个值传递给一个prop特性的时候，它就变成了那个组件实例的一个属性。这样在子组件就可以使用该该值。请注意：所有的prop都使得期父子prop之间形成了一个单向下行绑定，即父级prop的更新会向下流动到子组件，但是反过来就不行，子组件不能改变父组件的状态。
每次父组件发生更新时，子组件中所有的prop都会被刷新为最新的值。
在实例中演示如下：
，
在父组件中引用 TodoList组件，使用 :todos (v-bind:todos)传递一个数组，使用 :deleteTodo 传递一个函数，
子组件中使用props接收传入的参数，然后在本组件使用。无需再data中定义。 当传递函数给子组件，也就意味着， 子组件需要修改父组件的某一项值，但是无法自己修改，只能将 特定值(例如数组的某个角标 )传递或者不传参给父组件，通知父组件进行更新操作(例如删除 数组中的一个元素)。
2. 使用Vue自定义事件。
怎么使用呢？
父组件可以在使用子组件的地方直接用 v-on来监听子组件触发的事件 。即父组件中使用 v-on绑定自定义事件，然后在子组件中使用 $emit(eventName,data)触发事件。使用如下所示：
addTodo是一个函数，函数的具体内容不再展示了， 在子组件通过$emit 来触发该事件。
请注意： 该方式，仅仅用于父子组件传递，不适用于 三层及其以上
- 每个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) =>{// 箭头函数，绑定的是外部的thisthis.deleteTodo(index);})
在另一组件中发布消息：
// 注意先导入 PubSubPubSub.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>
注意： 因为传递的具体的标签是在父组件，所以操作也应该放在父组件中。也就是说应该在父组件运行好之后传入子组件，其所有的操作应该在父组件中进行。
如下所示，对子组件的这些操作，全部放入到父组件中：
- vuex通信 ，暂时还没有掌握具体用法。请等待后续。。。。。
左手的ㄟ右手
向右看齐
Dear 丶
迷南。
还没有评论，来说两句吧...