Vue组件通信

1. 父子通信

1.1 props和emit

父 -> 子 props
子 -> 父 事件$emit

1.2 双向绑定

v-model       子组件用$emit('input',data),可以用model属性修改value和input的名字。

.sync           在vue2.2恢复使用,可以实现双向修改,本质还是props和事件emit,vue内部进行了封装

props传递对象      props向下传递一个对象,子组件修改对象的属性,父组件的对象会发生变化

1.3 $parent和$children组件引用

在父子组件联系紧密的时候使用,相关度低的组件不要使用。

$parent                父组件的引用

$children             子组件的引用,数组,遍历操作

1.4 $attrs和$listeners

此方法尤其适用于爷孙组件,inheritAttrs: false可以控制中间组件不将多余props显示为html attribute,$attrs和$listeners可以将props和事件向下传递,孙组件和爷组件可以通信。

$attrs和$listeners用法示例

1.5 provide和inject

2. 通信方案

1. Event bus

使用一个Vue实例,或者任意一个PubSub的库作为中心,进行消息通信。
例如:

Vue.prototype.bus = new Vue

this.bus.$on 订阅事件
this.bus.$emit 触发事件

2. Vuex

通用的组件传值方案

原文地址:https://www.cnblogs.com/mengff/p/9517909.html