Appearance
组件中的通讯
通讯与组件之间的关系
- 父子关系
- 兄弟关系
- 隔代关系
- props
- $emit/$on
- $parent/$children
- $attrs/$listeners
- vuex
- observable
- provide/inject
一.Props传递数据
components
├── Grandson1.vue // 孙子1
├── Grandson2.vue // 孙子2
├── Parent.vue // 父亲
├── Son1.vue // 儿子1
└── Son2.vue // 儿子2
1
2
3
4
5
6
2
3
4
5
6
在父组件中使用儿子组件
vue
<template>
<div>
父组件: {{mny}} <br/>
子组件: <Son1 :mny="mny"></Son1>
</div>
</template>
<script>
import Son1 from "./components/Son1";
export default {
components: {
Son1
},
data() {
return { mny: 100 };
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
子组件
vue
<template>
<div>
{{mny}}
</div>
</template>
<script>
export default {
props: {
mny: {
type: Number,
},
},
data() {},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
二.$emit使用
子组件触发父组件方法,通过回调的方式将修改的内容传递给父组件
vue
<template>
<div>
父组件:{{mny}}
<Son1 :mny="mny" @input="change"></Son1>
</div>
</template>
<script>
import Son1 from "./Son1";
export default {
methods: {
change(mny) {
this.mny = mny;
}
},
components: {
Son1
},
data() {
return { mny: 100 };
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
子组件触发绑定自己身上的方法
vue
<template>
<div>
子组件1: {{mny}}
<button @click="$emit('input',200)">更改</button>
</div>
</template>
<script>
export default {
props: {
mny: {
type: Number
}
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
这里的主要目的就是同步父子组件的数据,->语法糖的写法
.sync
vue
<Son1 :mny.sync="mny"></Son1>
<!-- 触发的事件名 update:(绑定.sync属性的名字) -->
<button @click="$emit('update:mny',200)">更改</button>
1
2
3
2
3
v-model
vue
<Son1 v-model="mny"></Son1>
// v-model = :value + @input
<template>
<div>
子组件1: {{value}} // 触发的事件只能是input
<button @click="$emit('input',200)">更改</button>
</div>
</template>
<script>
export default {
props: {
value: { // 接收到的属性名只能叫value
type: Number
}
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
使用场景
判断传值是否需要 value
1
三.$parent、$children
继续将属性传递
vue
<Grandson1 :value="value"></Grandson1>
<template>
<div>
孙子:{{value}}
<!-- 调用父组件的input事件 -->
<button @click="$parent.$emit('input',200)">更改</button>
</div>
</template>
<script>
export default {
props: {
value: {
type: Number
}
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
如果层级很深那么就会出现$parent.$parent.....我们可以封装一个$dispatch方法向上进行派发
$dispatch
javascript
Vue.prototype.$dispatch = function $dispatch(eventName, data) {
let parent = this.$parent;
while (parent) {
parent.$emit(eventName, data);
parent = parent.$parent;
}
};
1
2
3
4
5
6
7
2
3
4
5
6
7
既然能向上派发那同样可以向下进行派发
$broadcast
javascript
Vue.prototype.$broadcast = function $broadcast(eventName, data) {
const broadcast = function () {
this.$children.forEach((child) => {
child.$emit(eventName, data);
if (child.$children) {
$broadcast.call(child, eventName, data);
}
});
};
broadcast.call(this, eventName, data);
};
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
四.$attrs、$listeners
批量向下传入属性
vue
<Son2 name="小珠峰" age="10"></Son2>
<!-- 可以在son2组件中使用$attrs属性,可以将属性继续向下传递 -->
<div>
儿子2: {{$attrs.name}}
<Grandson2 v-bind="$attrs"></Grandson2>
</div>
// 若不想挂载在dom上
inheritAttrs: false, // 不放入dom中
<template>
<div>孙子:{{$attrs}}</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
批量向下传入方法
vue
<Son2 name="小珠峰" age="10" @click="()=>{this.mny = 500}"></Son2>
<!-- 可以在son2组件中使用listeners属性,可以将方法继续向下传递 -->
<Grandson2 v-bind="$attrs" v-on="$listeners"></Grandson2>
<button @click="$listeners.click()">更改</button>
1
2
3
4
5
2
3
4
5
五.Provide & Inject
Provide
在父级中注入数据
provide() {
return { parentMsg: "父亲" };
},
1
2
3
2
3
Inject
在任意子组件中可以注入父级数据
inject: ["parentMsg"] // 会将数据挂载在当前实例上
1
六.Ref使用
获取组件实例
<Grandson2 v-bind="$attrs" v-on="$listeners" ref="grand2"></Grandson2>
mounted() { // 获取组件定义的属性
console.log(this.$refs.grand2.name);
}
1
2
3
4
2
3
4
七.EventBus
用于跨组件通知(不复杂的项目可以使用这种方式) 用于跨组件通知(不复杂的项目可以使用这种方式)
Vue.prototype.$bus = new Vue();
1
Son2组件和Grandson1相互通信
mounted() {
this.$bus.$on("my", data => {
console.log(data);
});
},
1
2
3
4
5
2
3
4
5
mounted() {
this.$nextTick(() => {
this.$bus.$emit("my", "我是Grandson1");
});
},
1
2
3
4
5
2
3
4
5