How to realize data response by Vue provide inject
an example is given on the official website, saying that it does not support responsive data, but responsive data can be passed in, so provide,inject can implement responsive data.
I should understand it correctly here. Ha
the demo, I wrote myself made the following changes
parent page:
export default {
provide(){
return {foo:this.fonnB}
},
data(){
return {fonnB:"old word"}
}
created() {
setTimeout(()=>{
this.fonnB="new words"; // foonBfoo
this._provided.foo="new words";
// foofoo old words
console.log( this._provided)
},1000)
},
}
child page:
export default {
inject:["foo"],
data(){
return {chilrfoo:this.foo}
}
}
2this.foo
the following changes have been made to achieve the parent component change, and the following grandchild components can update the data. In this way, a responsive data is passed in. If you need two-way data, you need to manually write the set function in the computed of the child page. Computed itself is only equivalent to a get function.
it is worth noting that childfooOld does not respond in the data data of the child page. If the form of childfooOld=this.foo and obj here is also responsive, then an is also responsive data.
if the single data format cannot respond, there is no set/get under childfooOld only when the set/get under data controls the change of attributes under data, not by this.foo.a.
parent page:
export default {
provide(){
return {foo:this.fonnB}
},
data(){
return {
fonnB:{a:'old word'}
}
}
created() {
setTimeout(()=>{
this.fonnB.a="new words";
// foofoo old words
},1000)
},
}
child page:
export default {
inject:['foo'],
data(){
return {
childfooOld:this.foo.a
}
},
computed:{
chilrfoo(){
return this.foo.a
}
}
}
the source code for prodive and inject is as follows
export function initInjections (vm: Component) {
const result = resolveInject (vm.$options.inject, vm)
if (result) {
observerState.shouldConvert = false
Object.keys(result).forEach(key => {
defineReactive(vm, key, result[key])
})
observerState.shouldConvert = true
}
}
you can see that prodive also uses the defineReactive function and adds its own set,get function, which is also responsive data, as shown in the following figure
.
inject set/getinject set/get
export function resolveInject (inject: any, vm: Component): ?Object {
if (inject) {
}
}
upload values up and down through computed
of course, you can bind the data attribute directly, but you cannot bind a single data
.
A code just found https://jsfiddle.net/Linusbor.
