其实在 Vue2.0基础学习 中，我们已经简单地了解过组件的使用了。在这一章中，我们主要来了解一下组件之间的通信。
父组件向子组件传递数据
使用 props 向子组件传递数据
示例代码：
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<c-b></c-b>
</div>
<script type="text/javascript">
// 子组件
var cA = {
props: ['msg'],
template: `<div>
<p>子组件收到：{{ msg }}</p>
</div>`
};
// 父组件
var cB = {
template: `<div>
<p>父组件说：我准备给子组件通信</p>
<c-a msg="我是父组件，我来给子组件通个信"></c-a>
</div>`,
components: {
cA: cA
}
};
var vm = new Vue({
el: '#app',
components: {
cB: cB
}
})
</script>
</body>
</html>
|
看上面的代码会感觉有点绕，因为子组件和父组件都是写在同一个文件里的，如果理解为分成三个文件，子组件一个，父组件一个，主文件一个，那么你就会清晰一些。
子组件向父组件传递数据
子组件主要通过事件传递数据给父组件，也就是在基础学习中的$emit。
示例代码：
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<c-b></c-b>
</div>
<script type="text/javascript">
// 子组件
var cA = {
template: `<div>
<button @click="$emit('say', '爸爸好')">我是子组件，点我，我有话对父组件说</button>
</div>`
};
// 父组件
var cB = {
data() {
return {
msg: ''
}
},
template: `<div>
<p>我是父组件，子组件刚刚对我说：{{ msg }}</p>
<c-a @say="msg = $event"></c-a>
</div>`,
components: {
cA: cA
}
};
var vm = new Vue({
el: '#app',
components: {
cB: cB
}
})
</script>
</body>
</html>
|
兄弟组件传递数据
兄弟组件直接的传递数据方式有很多，比如：
- 子传父，父再传子，太麻烦了，不考虑
- vuex，状态管理
- eventBus，可以理解为
$emit 和 $on 的结合使用
示例代码：
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<c-a></c-a>
<c-b></c-b>
</div>
<script type="text/javascript">
var eventBus = new Vue();
// 兄弟组件A
var cA = {
template: `<div>
<button @click="say">我是兄弟组件A，点我，我有话对兄弟组件B说</button>
</div>`,
methods: {
say() {
eventBus.$emit('say', '你好，兄弟组件B');
}
}
};
// 兄弟组件B
var cB = {
data() {
return {
msg: ''
}
},
template: `<div>
<p>我是兄弟组件B，我是兄弟组件A刚刚对我说：{{ msg }}</p>
</div>`,
created() {
eventBus.$on('say', (val) => {
this.msg = val;
})
}
};
var vm = new Vue({
el: '#app',
components: {
cA: cA,
cB: cB
}
})
</script>
</body>
</html>
|
在这里只介绍eventBus，因为后期会讲到vuex，而且现在估计有一部分人不知道vuex是什么。
总结
上面的示例代码看起来可能会有些乱，其实只要多敲几遍就会感觉没有想象中那么难，在后期我们使用vue-cli时，这些就会显得更简单。而且组件之间的传递数据在日常开发中，使用是超级多的，所以一定要多练习，很重要，很重要，很重要，重要的事情说三遍。