(十三)非父子组件传值(观察值模式)
2018-10-04 本文已影响0人
我拥抱着我的未来
本节知识点
- 兄弟间传值
- 多层间传值
解决办法
- VueX
- 总线机制 (本节讲解)
总线机制借用prototype还有$on
<body>
<div id="app">
<zujian1 content="Dell"></zujian1>
<zujian1 content="Less"></zujian1>
</div>
</body>
<script>
Vue.prototype.bus = new Vue(); //给每一个VUE实例都绑定一个原型BUS属性,并且bus里面的值就是vue实例
let zujian1 = {
props: {
content: {
type: String
}
},
data() {
return {
content2: this.content
}
},
template: '<div @click="change">{{content2}}</div>',
methods: {
change() {
this.bus.$emit("change", this.content2);
}
},
mounted: function() {
let _this = this; //作用域发生了变化
this.bus.$on('change', function(res) { //挂载的时候监听变化
_this.content2 = res
})
}
}
let app = new Vue({
el: "#app",
data: {
message: "Hello World!"
},
components: {
zujian1
}
})
console.log(app);
</script>
