通过此篇可以学到:
- 如何使用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 }
}
原因: