简单场景下,可以使用一个空的vue实例作为中央事件总线 进行通信
<div id="root">
<child content="childOne"></child>
<child content="childTwo"></child>
</div>
<script>
// bus 总线 进行非父子组件的传值
Vue.prototype.bus = new Vue()
Vue.component('child', {
props: ['content'],
data: function() {
return {
myContent: this.content
}
},
template: '<div @click="handleClick">{{myContent}}</div>',
methods: {
handleClick: function() {
this.bus.$emit('change', this.myContent)
}
},
mounted: function() {
var this_ = this;
this.bus.$on('change', function(content) {
this_.myContent = content
})
}
})
var vm = new Vue({
el: "#root"
})
</script>
网友评论