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和事件向下传递,孙组件和爷组件可以通信。
1.5 provide和inject
2. 通信方案
1. Event bus
使用一个Vue实例,或者任意一个PubSub的库作为中心,进行消息通信。
例如:
Vue.prototype.bus = new Vue
this.bus.$on 订阅事件
this.bus.$emit 触发事件
2. Vuex
通用的组件传值方案