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

}

})