十五、Vue之非父子组件传值

1.新建一个js文件，然后引入vue，实例化vue，最后暴露这个实例

VueEvent.js

import Vue from "vue";

var VueElement = new Vue();

export default VueElement;

2.在需要广播传递数值的地方引入刚才定义的实例，并通过VueEvent.$emit(‘名称’,‘数据’)传递数值

// 1.引入VueEvent(广播事件对象)
import VueEvent from "../util/VueEvent.js";
//2.广播待传递的数值
VueEvent.$emit('msg-left', "开门，左兄弟送温暖了！");

3.在需要接收广播传递数值的地方引入刚才定义的实例，并通过VueEvent.$on（‘名称’,‘function(data){}’）接收广播数据

<script>
// 1.引入VueEvent(广播事件对象)
import VueEvent from "../util/VueEvent.js";

export default {
    。。。。。
    /**
     * 实例创建完成之后的钩子函数
     */
    created() {
        //2.接收非兄弟组件传递过来的数值
        VueEvent.$on('msg-left',(data) => {
            console.log(data);
        });  
    },
}
</script>

注意：由于广播在用户操作过程中会反复调用，所以一般放在 created() 生命周期函数中！！！