Devi capire, la gerarchia dei componenti che stai avendo e come stai passando oggetti di scena, sicuramente il tuo caso è speciale e di solito non incontrato dagli sviluppatori.
Componente padre -myProp-> Componente figlio -myProp-> Componente nipote
Se myProp viene modificato nel componente padre, si rifletterà anche nel componente figlio.
E se myProp viene modificato nel componente figlio, si rifletterà anche nel componente nipote.
Quindi, se myProp viene modificato nel componente padre, si rifletterà nel componente nipote. (Fin qui tutto bene).
Pertanto, nella gerarchia, non devi fare nulla che gli oggetti di scena siano intrinsecamente reattivi.
Ora parliamo di salire nella gerarchia
Se myProp viene modificato nel componente grandChild non si rifletterà nel componente figlio. Devi usare il modificatore .sync nell'evento figlio ed emettere dal componente grandChild.
Se myProp viene modificato nel componente figlio , non verrà riflesso nel componente padre. Devi usare il modificatore .sync nell'evento genitore ed emettere dal componente figlio.
Se myProp viene modificato nel componente grandChild non si rifletterà nel componente padre (ovviamente). Devi usare il figlio del modificatore .sync ed emettere un evento dal componente nipote, quindi guardare il prop nel componente figlio ed emettere un evento sulla modifica che viene ascoltato dal componente genitore usando il modificatore .sync.
Vediamo un po 'di codice per evitare confusione
Parent.vue
<template>
<div>
<child :myProp.sync="myProp"></child>
<input v-model="myProp"/>
<p>{{myProp}}</p>
</div>
</template>
<script>
import child from './Child.vue'
export default{
data(){
return{
myProp:"hello"
}
},
components:{
child
}
}
</script>
<style scoped>
</style>
Child.vue
<template>
<div> <grand-child :myProp.sync="myProp"></grand-child>
<p>{{myProp}}</p>
</div>
</template>
<script>
import grandChild from './Grandchild.vue'
export default{
components:{
grandChild
},
props:['myProp'],
watch:{
'myProp'(){
this.$emit('update:myProp',this.myProp)
}
}
}
</script>
<style>
</style>
Grandchild.vue
<template>
<div><p>{{myProp}}</p>
<input v-model="myProp" @input="changed"/>
</div>
</template>
<script>
export default{
props:['myProp'],
methods:{
changed(event){
this.$emit('update:myProp',this.myProp)
}
}
}
</script>
<style>
</style>
Ma dopo questo non ti aiuterai a notare gli avvertimenti urlanti di dire vue
"Evitare di mutare direttamente un oggetto di scena poiché il valore verrà sovrascritto ogni volta che il componente padre viene sottoposto nuovamente a rendering."
Ancora una volta, come ho detto prima, la maggior parte degli sviluppatori non ha riscontrato questo problema, perché è un modello anti. Ecco perché ricevi questo avviso.
Ma per risolvere il tuo problema (secondo il tuo progetto). Credo che devi fare il lavoro sopra descritto (hack per essere onesti). Consiglio comunque di ripensare il tuo design e rendere meno incline ai bug.
Spero possa essere d'aiuto.