Vue的非父子组件通信

发表于 | 分类于 | 次

Vue的非父子组件通信

可以通过vuex和event bus来解决

Demo

我们要实现的效果是：

上下分别为foo组件和bar组件，他们之间是非父子关系，分别点击各自的button，另一个组件的count对应增加。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子组件通信</title>
</head>
<body>
    <div id="app">
        <foo></foo>
        <hr>
        <bar></bar>  
    </div>
</body>
</html>

JavaScript的实现是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
//注册一个空的Vue实例，作为“中转站”
var eventBus = new Vue({})
//foo组件
var foo = {
    template: `<div><p>the count of foo is {{fooCount}}</p>
                <button @click="addBar">add bar's count</button>
            </div>`,
    data () {
        return {
            fooCount: 0
        }
    },
    methods: {
        addBar () {
            eventBus.$emit('addBar',1)
        }
    },
    mounted () {
        eventBus.$on('addFoo', function (num) {
            this.fooCount += num    
        }.bind(this)) //这里必须将this绑定到组件实例上，如果不使用bind，也可以使用箭头函数。
    }
}
//bar组件
var bar = {
    template: `<div><p>the count of bar is {{fooCount}}</p>
                <button @click="addBar">add foo's count</button>
            </div>`,
    data () {
        return {
            barCount: 0
        }
    },
    methods: {
        addFoo () {
            eventBus.$emit('addFoo',1)
        }
    },
    mounted () {
        eventBus.$on('addBar', function (num) {
            this.barCount += num
        }.bind(this)) //这里必须将this绑定到组件实例上，如果不使用bind，也可以使用箭头函数。
    }
}
var vm = new Vue ({
    el: '#app',
    components: {
        foo,
        bar
    }
})

以上就实现了一个简易的非父子组件之间的通信方式。通过event bus，在一个组件创建时的钩子函数中监听某个事件，而在需要与其进行通信的组件中触发这个函数，同时交换数据。