在 Vue.js 的 2.2.0+
版本中添加加了 provide 和 inject 选项。用于父级组件向下传递数据。
provide/inject:简单的来说就是在父组件(或者曾祖父组件)中通过provide来提供变量,然后在子组件(或者孙组件)中通过inject来注入变量。(例如子组件想利用祖父组件上的值的情况)
1:定义一个parent component
<template>
<div>
<child></child> </div> </template> <script> import childOne from '../components/test/Child' export default {
name: "Parent",
provide: {
for: "demo"
},
components:{
child
},
data(){
return {
val:9
}
}
}
在这里我们在父组件中provide for这个变量
注意:如果provide{}对象中利用了this,则有提示this找不到的错误,因为provide定义的时候,渲染没有完成,需要改成
provide(){
return {
val: this.val
}
}
的形式。
2 定义一个子组件Child
<template>
<div> {{demo}} <grandson></grandson> </div> </template> <script> import childtwo from './Grandson' export default { name: "child", inject: ['for'], data() { return { demo: this.for } }, components: { grandson } } </script>
3 定义另一个孙子组件Grandson
<template>
<div> {{demo}} </div> </template> <script> export default { name: "", inject: ['for'], data() { return { demo: this.for } } } </script>
在子组件与孙组件中使用jnject注入了provide提供的变量for,并将它提供给了data属性。
这里官网注明例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时,注入的值会在 props 和 data 初始化之后得到。
运行之后看下结果
从上面这个例子可以看出,只要在父组件中调用了,那么在这个父组件生效的生命周期内,所有的子组件都可以调用inject来注入父组件中的值。