使用方法
注入静态变量
computed: {
rightheader: function () {
}
},
provide() {
return {
rightheader: this.rightheader
}
},inject: ['rightheader'],通过注入方法，动态获取数据
// 父组件
export default {
// 这里改为提供一个方法
provide() {
return {
getTestData: this.getTestData
}
},
data () {
return {
testData: null
}
},
methods: {
// 方法中返回testData
getTestData() {
return this.testData
}
},
components: {
child
},
created() {
this.testData = {
name: 'hello'
}
}
}// 子组件
export default {
// 在子组件中注入这个方法
inject: ['getTestData'],
created() {
console.log(this.getTestData())
}
}常见错误
Injection “getResData” not found
添加 default 属性，避免父级没有注入导致报错。
inject: {
_test: {
default: 'I am a test' //the default property is used as fallback value
},
getResData: {
default() {}
},
_validator: {
default() {//or we can use one factory method to warn the developers something.
console.log('@warn@', 'parent does not provide validator')
}
},
},
methods: {
getTodo: function() {
return this._test
}
}