VUE 中的 provide/inject 的浅析

前段时间在看 element-UI 的源码,发现了这样 一个属性: inject,于是去官网翻了翻文档 provider / inject

provider / inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。

需要注意的是这里不论子组件有多深,只要调用了 inject 那么就可以注入 provider 中的数据。而不是局限于只能从当前父组件的 prop 属性来获取数据。

下面我们来验证下猜想:

// 定义一个 Parent Component

<template>
<div id="app">
<child1 />
</div>
</template>

<script>
import child1 from "./components/child1.vue";

export default {
name: "app",
components: {
child1
},
provide() {
return {
vflyweb: "这是Parent Component传递过来的数据"
};
}
};
</script>

// 这里我们在父组件中provide 声明vflyweb这个变量。
// 定义一个子组件 child1

<template>
<div class="child1">
<h1>child1: {{ data1 }}</h1>
<child2 />
</div>
</template>

<script>
import child2 from "./child1.vue";
export default {
name: "Child1",
inject: ["vflyweb"],
data() {
return {
data1: this.vflyweb
};
},
components: {
child2
}
};
</script>

// inject: ["vflyweb"]
// 定义另外一个子组件 child2 

<template>
<div class="child2">
<h1>Child2: {{ data2 }}</h1>
</div>
</template>

<script>
export default {
name: "Child2",
inject: ["vflyweb"],
data() {
return {
data2: this.vflyweb
};
}
};
</script>

// 同样 inject: ["vflyweb"]
运行结果如上图

从上面这个例子可以看出,只要在父组件中调用了,那么在这个父组件生效的生命周期内,所有的子组件都可以调用inject来注入父组件中的值。

发表评论

电子邮件地址不会被公开。 必填项已用*标注