最近发现一个这样的属性:inject和provide
简单的来说他俩就是在父子组件中通过provide来提供变量,组组件通过inject来注入变量,需要注意的是,这里区别于通过prop,$emit传参,前者不论子组件有多深,只要调用了inject就可以注入provide里面的数据了
下面来验证一下:
- 先定义一个父组件
<template>
<div>
<childOne></childOne>
</div>
</template>
<script>
import childOne from '../components/test/ChildOne'
export default {
name: "Parent",
provide: {
for: "demo"
},
components:{
childOne
}
}
- 再定义一个子组件
<template>
<div>
{{demo}}
<childtwo></childtwo>
</div>
</template>
<script>
import childtwo from './ChildTwo'
export default {
name: "childOne",
inject: ['for'],
data() {
return {
demo: this.for
}
},
components: {
childtwo
}
}
</script>
- 这里再定义一个子组件
<template>
<div>
{{demo}}
</div>
</template>
<script>
export default {
name: "",
inject: ['for'],
data() {
return {
demo: this.for
}
}
}
</script>
在两个子组件中我们使用了inject注入了provide的变量for,并将它提供给data属性,就会在data里面进行初始化
运行后的结果为:
从上面的例子可以看出只要父组件中调用了provide,那么在父组件的有效生命周期中,子组件都可以用inject来注入父组件的值