Official Documentation:/v2/api/#provide-inject
First of all, let’s assume that when we were in the ancestors, it was dynamic data. Didn’t the official say that if you passed in an object that can be listened to, then its object is still responsive?
Parent parent page:
export default {
provide() {
return { foo: }
},
data(){
return { fonnB: 'old word '}
}
created() {
setTimeout(()=>{
= 'new words'; // Here only foonB has changed, foo has not changed this._provided.foo="new words"; // Here foo has changed, but the foo obtained by the child component is still old words ( this._provided);
},1000)
},
}
child subpage:
export default {
inject:['foo'],
data(){
return { chilrfoo: }
},
created() {
setTimeout(()=>{
// The foo obtained by the child component is still old words ( )
},2000)
}
}
result:
Through the above method, after verification, the subcomponent page cannot achieve the value that responds to the updated value. Maybe we have some errors in the official understanding. The following is to realize responsive data update through online information and our own ideas.
Example (the results are still not feasible)
It is obvious that we have changed the data source in the parent component timer above. At this time, we are wondering whether the data we changed has been passed into the descendant component. To verify this problem, we might as well write the set function manually in the descendant component. Computed itself is only equivalent to a get function. Of course, you can also try watch.
Parent parent page:
export default {
provide() {
return { foo: }
},
data(){
return {
fonnB: 'old word'
}
}
created() {
setTimeout(()=>{
= "new words";
// Here foo has changed, but the foo obtained by the child component is still old words },1000)
},
}
child subpage:
export default {
inject:['foo'],
data(){
return {
childfooOld:
}
},
computed:{
chilrdfoo() {
return
}
},
created () {
()
// -> 'old word'
setTimeout(() => {
(); // The calculation attribute here is still old words }, 2000);
}
}
Through computed, we all know that there is get/set in data, and the data is also responsive, but why it has not been updated is a bit confusing. If there is a big guy who knows that it can explain clearly, you can discuss it.
But, but, but! The actual requirements are definitely not that simple. Often, what we need is to share dynamic data in the parent component, which may come from data or store. That is to say, after the data in the parent component changes, it needs to be synchronized into the descendant component. What should I do at this time?
What I want is to assign a function to a value in the provide, which returns the dynamic data of the parent component, and then call this function in the descendant component.
In fact, this function stores references to the parent component instance, so the child component can get the latest data every time. The code looks like the following:
Parent component:
<template>
<div class="parent-container">
ParentComponents
<br/>
<button type="button" @click="changeName">Changename</button>
<br/>
ParentComponents中 nameValue of: {{name}}
<Child v-bind="{name: 'k3vvvv'}" />
</div>
</template>
<style scoped>
.parent-container {
padding: 30px;
border: 1px solid burlywood;
}
</style>
<script>
import Child from './Child'
export default {
name: 'Parent',
data () {
return {
name: 'Kevin'
}
},
methods: {
changeName (val) {
= 'Kev'
}
},
provide: function () {
return {
nameFromParent: ,
getReaciveNameFromParent: () =>
}
},
// provide: {
// nameFromParent: ,
// getReaciveNameFromParent: () =>
// },
components: {
Child
}
}
</script>
Child Components
<template>
<div class="child-container">
ChildComponents
<br/>
<GrandSon />
</div>
</template>
<style scoped>
.child-container {
padding: 30px;
border: 1px solid burlywood;
}
</style>
<script>
import GrandSon from './GrandSon'
export default {
components: {
GrandSon
}
}
</script>
GrandSon Components:
<template>
<div class="grandson-container">
GrandsonComponents
<br/>
{{nameFromParent}}
<br/>
{{reactiveNameFromParent}}
</div>
</template>
<style scoped>
.grandson-container {
padding: 30px;
border: 1px solid burlywood;
}
</style>
<script>
export default {
inject: ['nameFromParent', 'getReaciveNameFromParent'],
computed: {
reactiveNameFromParent () {
return ()
}
},
watch: {
'reactiveNameFromParent': function (val) {
('The name value from the Parent component has changed', val)
}
},
mounted () {
(, 'nameFromParent')
}
}
</script>
result:
From reactiveNameFromParent , it changes with the ancestor components
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.