Vue：非父子组件间的传值--bus(总线/观察者模式/发布订阅模式)

非父子组件间的传值
通过在Vue.prototype上绑定bus属性，在之后所创建的vue实例都具有bus这个属性，子属性接收到数据后，通过emit向父组件传值，通过每个组件都含有的生命周期钩子mounted，创建方法通过this.bus.$on触发传值的事件并接收所传的值

<div id="app">
<child content="Box"></child>
<child content="Min"></child>
</div>
<script>
//在生成vue实例前，给Vue的原型上添加一个bus属性，这个属性是vue的实例，
//之后创建的vue实例都具有bus这个属性
Vue.prototype.bus = new Vue()

Vue.component('child',{
data: function(){
return {
selfContent: this.content
}
},
props:['content'],
template: '<div @click="hdclick">{{selfContent}}</div>',
methods:{
hdclick: function() {
//向父组件传值,触发事件change
this.bus.$emit('change',this.selfContent)
}
},
mounted: function() {
//因为this的指向发生了变化，不用箭头函数的话就要先把this保存起来
var this_ = this
//监听事件change
this.bus.$on('change',function(msg){
this_.selfContent = msg
})
}
})

var app = new Vue({
el:"#app",
})

• 点赞 1
• 收藏
• 分享
• 文章举报