Vue3 自定义组件内部绑定变量值无法更新问题求助

问题原因 #

你在子组件中已经正确实现了自定义v-model的触发逻辑，但父组件仅做了单向的props传值，没有监听子组件抛出的update:searchField事件更新本地变量，因此数据无法双向同步。

解决方案 #

推荐直接使用Vue3支持的带参数的v-model语法，仅需要修改父组件中调用子组件的一行代码即可：
父组件的<input-form :searchField="searchField" />修改为：

<input-form v-model:searchField="searchField" />

该语法会自动完成两个动作：

• 将父组件的searchField变量作为props传递给子组件的searchField
• 监听子组件抛出的update:searchField事件，自动将事件携带的值更新到父组件的searchField变量中

修改后完整父组件代码：

<template>
  <div>
    <input-form v-model:searchField="searchField" />
    <p>Text Outside: {{ searchField }}</p>
  </div>
</template>

<script>
import inputForm from "components/input-form.vue";
export default {
  data() {
    return {
      searchField: "",
    };
  },
  components: {
    inputForm,
  },
};
</script>

如果不想使用v-model语法，也可以手动监听事件实现同等效果：

<input-form 
  :searchField="searchField" 
  @update:searchField="newVal => searchField = newVal" 
/>

修改完成后输入框的内容就会和父组件的变量双向同步了。

内容的提问来源于stack exchange，提问作者aulia amirullah