Vue——provide/inject的使用
常规使用
静态数据，非响应式
父组件
provide: {
name: 'zs',
age: 65,
gender: '男'
}
子组件
inject: ['name', 'age', 'gender'],
created () {
console.log(this.name) // => "zs"
}
响应式数据
数据变化从上往下流动
注意：
- 注入数据为对象才能实现，当为Number,String，Boolean等基本类型时变化无法向下流动。
- provide为函数格式
- 子代组件使用watch监听变化，也可以直接取响应式数据的值
父组件
provide() {
return {
grandPaInfo: this.grandPaInfo
}
},
data() {
return {
grandPaInfo: {
age: 65,
gender: '男'
}
}
}
子组件
inject: {
grandPaInfo: {
from: 'grandPaInfo'
}
},