1
2
3
4
5
6
7
8
9
10
11
12
| 父子组件
A与B、B与C、B与D、C与E、D与E
子孙组件
A与D、B与E
兄弟组件
C与D
隔代组件
A与E
|
父、子组件通讯 props、emit、.sync
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
| A.vue（父组件）
<template>
<B data.sync="100“ @eventFn=“parent” />
</template>
<script>
export default {
setup(props) {
eventFn = (number) => {}
return {}
}
}
</script>
B.vue（子组件）
<template>
<div>{{ data }}</div>
</template>
<script>
export default {
props: {
data: {
type: String,
defaule: ""
}
},
setup(){
emit(“parent”, 100) // 回调父组件的方法
emit(“update:data”, 111111)
}
}
</script>
|
中央事件总线
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| 创建实例
bus.js
import Vue from ‘vue';
export default new Vue();
调用事件
import Bus from 'bus.js'
Bus.$emit('getTarget', 11111);
注册事件
import Bus from 'bus.js'
Bus.$on('getTarget', target => {
console.log(target);
});
|
$attrs、$listeners
注意事件: 通过props接收相同名称的属性，将不被读取
provide、inject
跨级组件间的通信
祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量
1
2
3
4
5
| 父组件
provide("customVal", "我是父组件向子组件传递的值");
子组件
inject("customVal");
|
Vuex
1
2
3
4
5
6
7
8
9
10
| store
state: { username: 'xx' },
mutation: {
SET_USERNAME(state, value) {
state.username = value
}
}
index.vue
this.$store.state.commit('SET_USERNAME', 'yy')
|
$parent、$children、ref
