javascript - Vue3 在子组件中使用 v-model

Question

我刚刚发现在 Vue3 中，v-model没有响应式/反应式地使用 child Component。

此代码将更新username数据

<template>
  <div>
    <input type="text" v-model="username" placeholder="Insert your username" />
    <p>{{ username }}</p>
  </div>
</template>

<script>
// Home.vue
export default {
  name: 'Home',
  data() {
    return {
      username: 'admin'
    }
  }
}
</script>

如果我在 中输入一些东西input，username数据也会改变。

但是，当我Component像这个例子一样使用时：

<template>
    <input type="text" :class="'input-text ' + additionalClass" :placeholder="placeholder" />
</template>

<script>
// InputText.vue
import { defineComponent } from "vue"

export default defineComponent({
    name: 'InputText',
    props: {
        placeholder: {
            type: String,
            default: ''
        },
        additionalClass: {
            type: String,
            default: ''
        }
    }
})
</script>

然后我更新了我的代码以使用Component.

注意：Component注册成功。

<template>
  <div>
    <input-text v-model="username" :placeholder="`Insert your username`" />
    <p>{{ username }}</p>
  </div>
</template>

<script>
// Home.vue
export default {
  name: 'Home',
  data() {
    return {
      username: 'admin'
    }
  }
}
</script>

当我输入一些东西时，username数据没有更新，与前一个不同。

是否有任何解决方案或至少参考我想要实现的目标？

标签： javascriptvue.jsvue-componentvuejs3

Answer 1

您不能期望v-model为您隐式更新基础元素。换句话说，您仍然需要在组件本身内处理它并将其modelValue作为道具公开以使其真正起作用。像这样的东西：

<template>
  <input
    type="text"
    @input="onChanged"
    :value="modelValue"
    :class="'input-text ' + additionalClass"
    :placeholder="placeholder" />
</template>

<script>
  // InputText.vue
  import { defineComponent } from "vue"

  export default defineComponent({
    name: 'InputText',

    emits: ['update:modelValue'],

    props: {
      modelValue: String,
      placeholder: {
        type: String,
        default: ''
      },
      additionalClass: {
        type: String,
        default: ''
      }
    },

    setup(props, { emit }) {
      function onChanged(e) {
        emit('update:modelValue', e.currentTarget.value);
      }

      return {
        onChanged
      }
    }
  })
</script>