Vue组件通信

Vue组件关系可分为三大类: 父子组件 兄弟组件 跨级组件, 相应的组件之间的通信也分类三大类: 父子组件通信 兄弟组件通信 跨级组件通信

自定义事件

在子组件内通过$emit触发自定义事件, 在父组件内通过$on(or v-on @)来监听自定义事件来处理子组件向父组件传递数据, 同时v-on(@)可以通过.native修饰符监听原生DOM事件

使用v-model

v-model主要用在自定义组件之间的通信, 自定义组件内部通过$emit触发一个特定的input事件, 在父组件外部使用该自定义组件时通过v-model绑定到一个data上(即v-model是@input的语法糖);

v-model可用来创建自定义表单输入组件, 进行数据双向绑定, 实现方法为: 自定义组件的跟元素为input元素, 绑定其value到组件自身props, 监听input元素input change等事件, 其value改变时$emit一个input事件, 父组件使用该自定义组件时v-model绑定到一个data上, 从而实现数据双向绑定

非父子组件通信($dispatch $broadcast)

$dispatch和$broadcast是Vue 1.X提供的方法, 在Vue 2.X中已被废弃

$dispatch: 用于向父级(一级或多级)派发事件, $broadcast: 用于向下级(一级或多级)广播事件, 其事件的发送和接受采用就近原则, 第一次接收到事件后, 就会停止冒泡, 除非返回true.

Vue 2.X中被废弃原因:

• 基于树结构的事件流晦涩难懂;
• 在组件结构扩展过程中事件流变得愈发脆弱;
• 不能解决兄弟组件通信问题.

中央事件总线

这是Vue 2.X中一种比较完善的解决跨组件间通信的解决方法, 采用一个空的Vue实例作为中央事件总线(bus), 事件的触发和监听分别通过bus实例的$on和$emit实现, 不过需要注意app实例生命周期中处理bus的事件监听

父链

子组件中可以通过$parent访问该组件的父实例, 父组件也可以通过$children访问其所有的子组件, 可递归访问, 通过$parent,$children直接修改父实例,子组件的数据从而实现组件通信, 该方法不推荐使用, 这会使得父子组件高度耦合, 不利于组件的扩展.

子组件索引

即采用组件ref属性来快速遍历出我们需要的子组件, ref为组件制定了一个索引名称, 父组件通过this.$refs来访问指定索引的组件实例

vuex