Vue中的自定义事件问题

两个没有层级关系的组件不能用这个自定义事件直接进行通信？难道要通过他们的共同父元素才行？

我在一个事件中：

this.$on("setMultiColInput", (arg) => {
    console.log("Asdasds")
})

在另外一个组件中，点击时：

this.$emit("setMultiColInput", this.selectedGroup)

当并不生效

vuex vue.js

阅读 4.2k

3 个回答

得票最新

Chobits

7.4k2827

发布于
2016-11-04

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app">
        <c1 v-for="i in [1,2,3]" :i="i"></c1>
    </div>

    <template id="c1">
        <div><button @click="click">click{{ i }}</button></div>
    </template>

    <script src="http://cdn.bootcss.com/vue/2.0.3/vue.js"></script>

    <script>
        'use strict';

        window.eventHub = new Vue()

        Vue.component('c1', {
            props: ['i'],
            template: '#c1',
            created() {
                window.eventHub.$on('click', function (i) {
                    console.log(i + ' clicked in ' + this.i)
                }.bind(this))
            },
            methods: {
                click() {
                    window.eventHub.$emit('click', this.i)
                }
            }
        })

        new Vue({
            el: '#app'
        })
    </script>
</body>
</html>