变量的值不会在组件内部更新

Question

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

Child 组件 (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>

Parent

    <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>

Answer 1

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

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

或

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

变量的值不会在组件内部更新

The Value of Variables does not update inside components

vue.js

vue-component

vuejs3