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 }
}

原因：