一、功能
通常情况下,父组件向孙组件传递数据,可以采用父子 props 层层传递,也可以使用 event-bus 和 vuex 直接交互。实际上,vue还提供了 provide/inject 选项。
这对选项允许一个祖先组件向其所有子孙后代组件注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
也就是说,在父组件只要声明了provide,在其子组件,孙组件,曾孙组件等能形成上下游关系的组件中交互,无论多深都能通过inject来访问provider中的数据。而不是局限于只能从当前父组件的prop属性来获取。注意他只做祖先通后代的单向传递的一个办法。有人这么形容:
provide就相当于加强版父组件prop,可以跨越中间组件,inject就相当于加强版子组件的props
二、用法
父组件代码:
<template>
<Son />
</template>
<script>
import Son from '@/components/Son'
export default {
components: {
Son
},
data () {
return {
msg: 'hello world'
}
},
methods: {
getMsg () {
alert('hello world')
}
},
// 提供变量:
provide () {
return {
msg: this.msg,
getMsg: this.getMsg
}
}
}
</script>
子组件代码:
<template>
<div>
<p>{
{
msg}}</p>
<button @click="getMsg">确定</button>
</div>
</template>
<script>
export default {
name: 'Son',
// 注入变量:
inject: ['msg', 'getMsg']
}
</script>