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

            }

        })