Vue双向绑定问题：无法从子组件更新父组件的排查求助

嘿，我一眼就瞅出问题啦——你把.sync修饰符用错位置了！它根本不该加在父组件的按钮上，得加到子组件的props绑定上才行。

核心错误点 #

在你的Parent组件模板里，你给按钮加了:name.sync="name"，这完全是无效操作：按钮不是自定义组件，.sync对原生元素根本不起作用。而真正需要.sync的是<Child>组件的name属性绑定，因为只有这样Vue才能自动帮你监听子组件抛出的update:name事件，进而更新父组件的name值。

修正步骤 #

1. 修改Parent组件的模板：
   把按钮上的:name.sync="name"删掉（按钮只需要点击事件就行），然后给Child组件的name绑定加上.sync：

   <template>
     <v-container>
       <v-row class="text-center">
         <v-col cols="12" class="parent">
           <p>Ich bin der Parent component</p>
           <button @click="changeDetail">Change Details</button>
           <Child :name.sync="name"></Child>
         </v-col>
       </v-row>
     </v-container>
   </template>
   

2. Child组件无需修改：
   你的Child组件代码是完全正确的——它通过this.$emit("update:name", this.newname)正确触发了符合.sync规范的事件，这部分没问题。

原理补充 #

Vue 2里的.sync其实是个语法糖，:name.sync="name"等价于：

<Child :name="name" @update:name="name = $event"></Child>

它帮你省略了手动写监听事件的代码，但前提是必须把它用在子组件的props绑定上，否则Vue不知道要监听哪个事件来更新父组件的数据。

现在你再运行代码试试，点击子组件的“Reset the name”按钮，父组件的name应该就能被正确更新啦！

内容的提问来源于stack exchange，提问作者Data Mastery