标签：定义 数据流 eth 钩子 nbsp pre 观察者 发布订阅 创建组
非父子组件间传值有两种方法，一种是vuex共享数据，另一种是发布订阅模式/观察者模式/总线/Bus。这篇随笔主要总结总线机制的学习心得：
首先通过在Vue.prototype上挂载一个bus属性，指向vue实例；接下来在调用Vue或者创建组件时都会有bus属性。
Vue.prototype.bus=new Vue()
var Child={
props:[‘content‘],
data:function() {
return {num:this.content}
}, //因为vue是单项数据流，子组件不能改变父组件传过来的值
template:"<div @click=‘handleClick‘>{{num}}</div>",
methods:{
handleClick:function(){
this.bus.$emit(‘change‘,this.num) //传值
} //将值传递给另一个组件，由于bus是Vue实例，所以会有$emit方法向外触发事件
},
mounted:function() {
var that=this //this的指向发生了变化
this.bus.$on(‘change‘,function(msg) {
that.num=msg
}) //生命钩子监听change事件
}
}
其次在局部子组件接收父组件的值content，在模板中添加一个click事件用于触发事件和传值（向兄弟组件）。
随后在vue的生命周期函数mounted中监听change事件，用传过来的值修改DOM内容。
vue实例的定义如下：
var app = new Vue({
el: ‘#app‘, //接管范围
components: {
Child:Child
}
})
<div id=‘app‘> <child content="dell"></child> <child content="Lee"></child> </div>
最终实现点击一个组件，该组件的值会传给另一个组件。
标签：定义 数据流 eth 钩子 nbsp pre 观察者 发布订阅 创建组
原文地址：https://www.cnblogs.com/lora404/p/12345362.html
