Vue_组件传值_非父子组件间的传值

• 使用单独的事件中心管理组件间的通信

var eventHub=new Vue()

• 使用eventHub.$on和eventHub.$off来监听和关闭事件监听,使用eventHub.$emit来触发事件.

<div id="app">
        <com1></com1>
        <com2></com2>
        <hr>
        <input type="button" value="点击关闭对所有事件的监听" @click="off">
    </div>
    <template id="tmp1">
        <div>
            <p>组件1</p>
            <p>{{num}}</p>
            <input type="button" value="点击修改组件2的值" @click="update1">
        </div>
    </template>
    <template id="tmp2">
        <div>
            <p>组件2</p>
            <p>{{num}}</p>
            <input type="button" value="点击修改组件1的值" @click="update2">
        </div>
    </template>

<script>
        var hub = new Vue();
        var com1 = {
            template: "#tmp1",
            data() {
                return {
                    num: 0
                }
            },
            methods: {
                update1() {
                    hub.$emit('func2', 1);
                }
            },
            mounted() {
                hub.$on('func1', (val) => {
                    this.num += val;
                })
            }
        };
        var com2 = {
            template: '#tmp2',
            data() {
                return {
                    num: 0
                }
            },
            methods: {
                update2() {
                    hub.$emit('func1', 5);
                }
            },
            mounted() {
                hub.$on('func2', (val) => {
                    this.num += val;
                })
            }

        };
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {
                off() {
                    hub.$off('func1');
                    hub.$off('func2');
                }
            },
            filters: {},
            directives: {},
            components: {
                com1,
                com2
            },
            watch: {},
            computed: {}
        });
    </script>

• 如上代码所示.子组件1挂载完毕后即开始监听自定义事件func1,并传入值1.子组件2挂载完毕后即开始监听自定义事件func2,并传入值5.
• 子组件1中通过点击按钮调用本地函数update1,从而触发自定义事件func2,因为子组件2一直在监听自定义事件func2,也因此通过触发事件func2来达到向子组件2传入数据的目的.其逻辑为 子组件2监听事件func2---->子组件1触发事件func2,并在触发阶段传值给子组件2的监听函数---->子组件2的监听函数将传入数值本地处理.
• 子组件2的传值原理同上.
• 传值是在触发事件阶段.