您需要了解组件层次结构以及如何传递 props，确切地说，您的情况很特殊，开发人员通常不会遇到这种情况。
父组件 -传递myProp-> 子组件 -传递myProp-> 孙子组件
如果在父组件中更改了myProp，则子组件中也会反映该更改。
如果在子组件中更改了myProp，则孙子组件中也会反映该更改。
因此，如果在父组件中更改了myProp，则孙子组件中也会反映该更改。(目前为止还好)
因此，在组件层次结构中向下时，您无需做任何事情，props 将天然具有响应性。
现在来讨论向上移动。
如果在孙子组件中更改了myProp，则不会在子组件中反映出来。您必须在子组件中使用 .sync 修饰符，并从孙组件中发出事件。
如果在子组件中更改了myProp，则不会在父组件中反映出来。您必须在父组件中使用 .sync 修饰符，并从子组件中发出事件。
如果在孙子组件中更改了myProp，则不会在父组件中反映出来（显然）。您必须在子组件中使用 .sync 修饰符，并从孙子组件中发出事件，然后在子组件中监视该 prop，并在更改时发出一个事件，该事件通过 .sync 修饰符被父组件监听。
让我们看一些代码以避免混淆
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>
孙子组件.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>
但是在这之后，你一定会注意到Vue发出的尖叫警告：
'避免直接变异Prop，因为每当父组件重新呈现时该值将被覆盖。'
正如我之前提到的，大多数开发人员不会遇到此问题，因为它是一种反模式。这就是为什么你会收到这个警告。
但是为了解决你的问题（根据你的设计），我认为你必须做出上述的变通方法（说实话是hack）。我仍然建议你重新考虑你的设计，并使其更不容易出现错误。
希望对你有所帮助。
