前言
Vue组件实例间的作用域是相互独立的，而通常一个页面是由很多个组件构成，这些组件可能又嵌套了组件，形成了一个关系网图，它们的关系可能是像下图中一样，大致分为两种使用场景，父子组件间通信和非父子组件间通信，父子组件间通信又分为直接父子关系和间接父子关系。vue提供了多种通信方法，针对不同的通信需求，选择最合适的通信方式能帮助我们提高开发效率。本文简要介绍了八种通信方式以及适用场景，记录下在学习中的收货。
组件关系.png
父子组件间的通信
props和$emit
这是父子组件在传参时中常用的一种方式，父组件通过v-bind传入参数，子组件通过props来接收，子组件通过内建的$emit方法传入事件名来触发一个事件，父组件通过v-on像监听原生DOM事件一样来监听这个事件。
// 父组件CompFather
<template>
<div>
<comp-son
:title-name="title_name"
@changeTitle="changeTitle"
/>
<div>父组件的title_name：{{ title_name }}</div>
</div>
</template>
<script>
import CompSon from "./CompSon";
export default {
name: "CompFather",
components: {CompSon},
data() {
return {
title_name: "我是初始值"
}
},
methods: {
changeTitle(val) {
this.title_name = val;
}
}
}
</script>
// 子组件CompSon
<template>
<div>
<div>子组件的titleName：{{titleName}}</div>
<button @click="changeTitle">改变</button>
</div>
</template>
<script>
export default {
name: "CompSon",
props: {
titleName: {
type: String,
required: true
}
},
methods: {
changeTitle() {
this.$emit("changeTitle", "我变了");
}
}
}
</script>
适用场景：适用于直接父子关系（中间无嵌套组件）的组件间进行通信。
$attrs和$listeners
$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。
// Comp1.vue
<template>
<comp2
:flag="flag"
:id="id"
:msg="msg"
/>
</template>
<script>
import Comp2 from "./comp2";
export default {
name: "comp1",
components: {Comp2},
data() {
return {
id: 1,
msg: "comp1's msg",
flag: true
}
}
}
</script>
// Comp2.vue
<template>
<div>
<div>comp2的$attrs：{{$attrs}}</div>
<comp3 v-bind="$attrs" />
</div>
</template>
<script>
import Comp3 from "./comp3";
export default {
name: "comp2",
components: {Comp3},
props: {
flag: Boolean
},
mounted() {
console.log(this.$attrs); // { "id": 1, "msg": "comp1's msg" }
}
}
</script>
// Comp3.vue
<template>
<div>comp3的$attrs：{{ $attrs }}</div>
</template>
<script>
export default {
name: "comp3",
props: {
msg: String
},
mounted() {
console.log(this.$attrs); // { "id": 1 }
}
}
</script>
这里Comp2的props接收了Comp1传入的flag，因此Comp2中的$attrs没有flag参数，Comp3接收了msg，因此$attrs只有id。
适用场景：组件之间跨级传参，可以使用$attrs属性，这样使得代码更加简洁，更利于维护。
$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。
当我们要封装一个input类型的组件时，我们可以通过.native的方式监听它的原生事件。
// App.vue
<my-input @input.native="inputData" :value="value" />
// MyInput.vue
<template>
<input
type="text"
:value="value"
@input="$emit('input',e.target.value)"
>
</template>
<script>
export default {
name: "MyInput",
props: {
value: String
},
}
</script>
但如果此时的input被label标签包裹了一层，input不再是根组件时，父组件的.native将监听失效，于是vue给我们提供了$listeners属性来解决这个问题。
// MyInput.vue
<template>
<label>
value：{{ value }}
<input
type="text"
:value="value"
@input="$emit('input',e.target.value)"
>
</label>
</template>
以下是使用$listeners属性进行监听：
// App.vue
<template>
<my-input v-model="value" @focus="onFocus" @input="inputData" />
</template>
<script>
export default {
name: "App",
data() {
value: ""
},
onFocus() {
console.log("获得焦点");
},
inputData(val) {
console.log(val);
}
}
</script>
<template>
<label>
value：{{ value }}
<input
type="text"
:value="value"
v-on="inputListeners"
>
</label>
</template>
<script>
export default {
name: "MyInput",
props: {
value: String
},
computed: {
inputListeners: function () {
const vm = this
// `Object.assign` 将所有的对象合并为一个新对象
return Object.assign({},
// 我们从父级添加所有的监听器
this.$listeners,
// 然后我们添加自定义监听器，
// 或覆写一些监听器的行为
{
// 这里确保组件配合 `v-model` 的工作
input: function (event) {
vm.$emit('input', event.target.value)
}
}
)
}
},
}
</script>
适用场景：当需要监听子组件的原生事件，且子组件可能是经过重构的组件时，可以使用$listeners来代替.native监听，当然也不只是包含原生事件监听器，只是在这里监听原生事件比较合适，我们还有其它方式来做事件监听。
$children/$parent/$root
$children是当前实例的直接子组件，不保证顺序，数组顺序不一定是子组件在该父组件中的渲染顺序，也不是响应式的。
如果当前实例有父组件的话，$parent则是当前实例的父实例。
$root是当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。通过this.$root来访问。
<script>
export default {
name: "MyComp",
data() {
value: ""
},
mounted: {
console.log(this.$parent);
console.log(this.$children);
console.log(this.$root);
}
}
</script>
缺点：parent.
parent...的情况，对于后续维护不友好。
适用场景：尽量使用其它方式来代替$parent/$chilren
ref
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。
// App.vue
<template>
<comp1 ref="comp1"/>
</template>
<script>
export default {
name: "App",
data() {
value: ""
},
mounted: {
console.log("comp1的msg：",this.$refs.comp1.msg);
}
}
</script>
适用场景：当使用element-ui组件时，可用于调用组件方法，例如el-table组件的选择表格项，排序等等。
v-model
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突。
// App.vue
<add-item v-model="input_val" />
<template>
<div class="add">
<input
:value="value"
type="text"
placeholder="What needs to be done?"
@input="inputVal"
>
</div>
</template>
<script>
export default {
name: "AddItem",
// 如果对应的props字段名不叫value，则需要定义model属性来指定父组件的v-modal绑定的是哪个值
/*model: {
prop: "value1",
event: "input"
},*/
props: {
value: {
type: String,
required: true
}
},
methods: {
inputVal(e) {
this.$emit("input", e.target.value);
}
}
}
</script>
适用场景：v-model适用于在封装input类型的组件时，用于给数据进行双向绑定，如果不使用v-model，则需要在父组件增加一个方法来监听事件然后改变父组件中的值，显得非常麻烦且不简洁。
Sync修饰符
sync与v-model非常类似，也是适用于需要子组件改变父组件的值时。 :isShow.sync="isShow"其实是 @update:isShow="bol=>isShow=bol"语法糖
<template>
<div>
<input type="button"
value="我是父组件中的按钮"
@click="show">
<child :isShow.sync="isShow" v-show="isShow"/>
</div>
</template>
<script>
import child from "@/components/child"
export default {
data() {
return {
isShow:false
}
},
components:{
child
},
methods:{
show(){
this.isShow=true;
},
changeIsShow(bol){
this.isShow=bol;
}
}
}
</script>
<template>
<div>
我是一个子组件，我在红色的海洋里！
<input type="button" value="点我隐身" @click="upIsShow">
</div>
</template>
<script>
export default {
methods:{
upIsShow(){
this.$emit("update:isShow",false);
}
}
}
</script>
provide/inject
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。
provide在父组件中将子组件要使用的数据抛出，然后在子组件中inject注入要使用的数据，它不像使用props需要层层传递，中间不需要这个数据的地方也需要声明，provide和inject只注重“源头”和“终点”，主要用于在高阶组件库中使用，在平常的开发中一般不适用的原因是不方便追溯“源头”，不知道是哪一层声明的和使用了。
子孙层中的provide会覆盖祖父层中相同key的属性值。
provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。
inject选项应该是一个字符串数组或一个对象，from是选自祖父组件provide的哪个值的key，default指定一个默认值。
// 父组件
provide: ["message"],
// 子组件
inject: {
msg: {
from: "message",
default: "default value"
}
}
// 父组件CompFather
<template>
<div>
<comp-son />
</div>
</template>
<script>
import CompSon from "./CompSon";
export default {
name: "CompFather",
components: {CompSon},
provide: {
msg: "父组件msg"
}
}
</script>
// 子组件 CompSon
<template>
<div>
子组件
</div>
</template>
<script>
export default {
name: "CompSon",
inject: ["msg"],
mounted() {
console.log(this.msg); // 父组件msg
}
}
</script>
provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。例如provide和inject的是一个对象时，该数据是可响应的。
// 当provide/inject的是一个对象时，是可响应的，子组件改变值，父组件也会改变，父组件改变子组件也会改变
provide() {
return {
msg: this.msg
}
},
data() {
return {
msg: {
title: "父组件msg"
}
}
}
适用场景：适用于封装高阶组件，祖先实例不关心哪个后代实例会用到，后代实例不关心数据来源于哪个祖先实例。
非父子组件间的通信
中央事件总线 bus
使用中央事件总线实际就是创建一个vue实例，利用这个vue实例来传递消息。
使用方式一：
// 定义一个bus文件
import Vue from "vue";
const bus = new Vue();
export default bus;
// 引入bus文件
import bus from "@/bus";
bus.$emit("myEvent", "bus msg")
// 引入bus文件
import bus from "@/bus";
bus.$on("myEvent", data => {
console.log(data);
});
使用方式二：
// main.js
import Vue from 'vue'
import App from './App.vue'
Vue.prototype.$bus = new Vue();
new Vue({
render: h => h(App),
}).$mount('#app')
// 发送事件
this.$bus.$emit("myEvent", "bus msg")；
// 接收事件
this.$bus.$on("myEvent", data => {
console.log(data);
})
适用场景：适用于不是特别大的单页面应用跨级跨兄弟组件间通信。
VueX
当我们在开发大型但单页应用时，组件间需要频繁使用修改某些值，这时候使用组件间传参就显得非常繁杂混乱，且不利于管理维护，vue为解决这一问题提供了VueX这个状态管理工具，我们只需要将多个组件需要共享的状态放VueX中进行统一管理，形成一个全局单例管理模式，即可实现组件数据同步。
vuex
VueX的将要统一管理的状态放在state中，这样在引用了VueX的页面中就能获取到状态，actions主要是处理例如后台请求的一些异步操作，保证数据的同步，通过dispatch方法调用actions中的方法，当得到异步的数据之后再通过commit调用mutations中的方法改变state。不要在组件中通过$store.state直接修改state数据，这样Devtools是监控不到的，要经过mutations才可以。
这里只是简要介绍通信方式，详细的使用方法参见
[VueX官网] https://vuex.vuejs.org/zh/
总结
| 通信方式 | 适用场景 |
|---|---|
props/$emit
|
直接父子组件传值 |
$attrs/$listeners
|
$attrs非直接父子组件间传值，$listeners监听原生事件 |
$children/$parent
|
一般用其它方式代替，不方便维护 |
ref |
可用于调用高阶组件方法，如注册element-ui组件引用 |
v-model |
封装需要双向绑定的组件时用v-modal进行传参 |
sync修饰符 |
用于父子组件间，子组件需要改变父组件值时 |
provide/inject
|
多用于高阶组件库，平常开发一般不使用，不利于代码维护 |
| 中央事件总线 | 适用于跨级或兄弟组件间通信。 |
VueX |
用于大型单页面中多个组件需要共享同一状态时。 |
网友评论