vue之非父子通信

一.非父子通信:

思路: 找个中间存储器,组件一把信息放入其中,组件二去拿

代码如下:

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

}

})

巴特西