一.非父子通信:
思路: 找个中间存储器,组件一把信息放入其中,组件二去拿
代码如下:
let hanfei = new Vue(); # 实列化个空的vue对象,作为中间存储器来时间
let maweihua = {
template: `<div>
<h1>这是张三</h1>
<button @click="my_click">点我向李四说话</button>
</div>`,
methods: {
my_click: function () {
// 向李四说话,向中间调度器提交事件
hanfei.$emit("zhangsan_say", "晚上等我一起吃饭~~~") # 向存储器提交信息用$emit
} # 括号内东西代表( 事件名字, 提交的信息 )
}
};
let kangchen = {
template: `<div><h1>这是李四</h1> {{say}} </div>`,
data(){
return { say: "" }
},
mounted(){ # mounted这个钩子函数在加载完成后还会一直监听
// 监听中间调度器中的方法
let that = this;
hanfei.$on("zhangsan_say", function (data) { # 从存储器中取值用$on
that.say = data # 只要中间存储器内有对应事件的数据发生改变,就让其反应到data
}) # 接上, 内的say中.
}
};
const app = new Vue({
el: "#app",
components: {
maweihua: maweihua,
kangchen: kangchen
}
})