图片.png
前面章节有关于父子组件间的传值的学习，就是临近两个模块之间的传值，比如1和2。但是也会出现这样的情况：1和3之间传值、3和3之间传值这样非父子模块间的传值。
Vue里面有两种方法解决非父子组件间的传值问题：1、用Vue官方提供的数据层框架——VueX来解决；2、还可以用发布订阅来解决非父子组件间的传值问题，这种发布订阅模式在Vue中被称为总线机制。
下面例子：
<body>
<div id="root">
<child content="Dell"></child>
<child content="Lee"></child>
</div>
<script>
Vue.component('child',{
props:{
content:String
},
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el:'#root'
})
</script>
</body>
最终在页面上显示的就是：
图片.png
现在要实现一个需求：当我点击其中任意一个名字的时候，另一个名字会变成我点击的那个名字，即当我点击Dell的时候，Lee会变成Dell。
因为Dell和Lee是兄弟关系，并非父子关系，所以这个问题符合非父子组件间的传值问题。
<body>
<div id="root">
<child content="Dell"></child>
<child content="Lee"></child>
</div>
<script>
Vue.prototype.bus = new Vue()
Vue.component('child',{
data:function(){
return{
selfContent:this.content
}
},
props:{
content:String
},
template:'<div @click="handleClick">{{selfContent}}</div>',
methods:{
handleClick:function(){
this.bus.$emit('change',this.selfContent)
}
},
mounted: function(){
var this_ = this
this.bus.$on('change',function(msg){
this_.selfContent = msg
})
}
})
var vm = new Vue({
el:'#root'
})
</script>
</body>
将Vue实例赋值给Vue.prototype.bus。这其中意思是，在Vue.prototype中挂载了bus属性，这个属性指向Vue的实例。以后只要调用new Vue（）或者创建组件的时候，每一个组件上都会有bus这个属性。这是因为每一个组件或者每一个Vue实例，都是通过Vue这个类来创建的，而就在刚才我在Vue类上挂载了bus这个属性，而且挂在了Vue类的prototype上面。所以每一个通过Vue.prototype类创建的对象都是会有bus这个属性，都指向同一个实例。
methods:{
handleClick:function(){
this.bus.$emit('change',this.selfContent)
}
},
这句话的意思：this.bus也就是Vue.prototype中的.bus，这个bus又是一个Vue实例，所以就会有$emit这方法，那么就可以通过这个方法向外触发事件“change”，这个事件触发的时候携带了一个数据“this.content”，即内容。
既然这个事件触发了，那么就会有其他的组件进行监听，可以借助生命周期钩子mounted，也即这个函数被挂载的时候，执行的一个函数。
mounted: function(){
var this_ = this
this.bus.$on('change',function(msg){
this_.selfContent = msg
})
}
在这里，让这个组件监听bus的改变，这个组件一定会有bus这个属性，因为bus是Vue的实例，所以bus上又会有$on这个方法，所以这个就可以监听到bus上发出来的事件‘change’。
为什么这里面的this写成this_？因为mounted中的function函数里的this作用域发生了变化，不再是上面的那个this作用域。所以将this改用别的名字。
上面的代码其实还有一个问题，就是content内容是从父组件中传递过来的，但是到子组件的时候，却被改变了（this_.content = msg）。这时可以在子组件中将content拷贝一下，将数值考到selfContent。
网友评论