VUE实现Provide的计算属性

通过此篇可以学到：

• 如何使用Provider+inject进行“跨代”传值
• 如何实现一个计算属性的Provider
• 如何解决告警“injection "xxxxx" not found. ”

一、描述

        目前需要创建一个计算属性传入Provide，并且能够被其他组件Inject

二、实现

父组件

...
import {computed} from 'vue';
//提供一个计算属性
provide() {return {tabName: computed(()=> this.active)}
},
data() {return {active: 'tab1'}
}

子孙组件

...
//注册父组件提供的tabName
inject: {tabName: {value: 'tabName',default: null}
}

三、解决injection告警

告警：injection "xxxxx" not found. 

有告警的写法：

inject:['tabName']

 解决方法：

        等级default: null

inject: {tabName: { value: 'tabName', default: null }
}

原因：