vue.js - 变量的值不会在组件内部更新

Question

当我将输入字段放在组件中时，它不会以任何方式更新值。有什么我错过的吗？顺便说一句，我使用 Vue 3。

子组件（input-form.vue）

    <template>
      <input
        type="text"
        :value="searchField"
        @input="$emit('update:searchField', $event.target.value)"
      />
      <p>Text Inside: {{ searchField }}</p>
    </template>
    
    <script>
    export default {
      emits: ["update:searchField"],
      props: {
        searchField: {
          type: String,
        },
      },
    };
    </script>

家长

    <template>
      <div>
        <input-form :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>

标签： vue.jsvue-componentvuejs3

Answer 1

您没有update:searchField在 Parent 中监听事件。

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

或者

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