子组件可以用this. p a r e n t 访 问 父 组 件 的 实 例 , 孙 子 组 件 可 以 用 t h i s . parent访问父组件的实例,孙子组件可以用this. parent访问父组件的实例,孙子组件可以用this.parent. p a r e n t 来 访 问 , 那 曾 孙 子 组 件 呢 , 是 不 是 要 写 很 多 个 parent来访问,那曾孙子组件呢,是不是要写很多个 parent来访问,那曾孙子组件呢,是不是要写很多个parent。
如果父组件下很多个子孙组件都要用祖先组件中的一个数据,这时候就要用到组件的依赖注入。
依赖注入,是通过provide inject 这两选项实现,provide是写在祖先组件中,inject是写在需要注入的子孙组件中。
provide选项应该是一个对象或返回一个对象的函数.
inject 选项应该是一个字符串数组或一个对象
对象的key是本地的绑定名,value是provide的 key (字符串或 Symbol)。
value也可以是个一个对象,该对象的:
from 属性是provide的 key (字符串或 Symbol)
default属性是在form定义的key在provide中未定义,使用的默认值。
祖先组件
<template>
<div>
<son></son>
</div>
</template>
<script>
export default{
data(){
return {}
},
provide(){
return{
top:20,
}
},
components:{
son:resolve => require(['./son.vue'],resolve)
}
}
</script>
son儿子组件
<template>
<div>
<grandson></grandson>
</div>
</template>
<script>
export default{
data(){
return {}
},
inject:['top'],
components:{
grandson:resolve => require(['./grandson.vue'],resolve)
},
mounted(){
console.log(this.top)//20
}
}
</script>
grandson儿子组件
<template>
<div></div>
</template>
<script>
export default{
data(){
return {}
},
inject:{
top:{
from:'top',
default:'30'
},
bottom:{
from:'bottom',
default:'30'
}
},
components:{
grandson:resolve => require(['./grandson.vue'],resolve)
},
mounted(){
console.log(this.top)//20
console.log(this.bottom)//30
}
}
</script>
最后推荐一个 js常用的utils合集,帮我点个star吧~