Vue3.0中自定义组件使用v-model

v-model实现双向绑定在输入的时候绑定了input事件，在这个事件中将最新的值重新赋值给value，而value又被代理了，在修改的时候会一并更新页面中template中用到的地方，同时代码中value的更新也会使input框中的输入内容更新。在自定义组件使用v-model时，组件内部要检测值的改变，如果发生改变则要冒泡事件 update:modelValue，这样父组件中的v-model值就

DanceDonkey

4023人浏览 · 2022-10-18 14:04:22

DanceDonkey · 2022-10-18 14:04:22 发布

v-model指令为一个复合指令

  <input type="text" :value="value" v-on:input="value = $event.target.value">
  <input type="text" v-model="value">

v-model实现双向绑定在输入的时候绑定了input事件，在这个事件中将最新的值重新赋值给value，而value又被代理了，在修改的时候会一并更新页面中template中用到的地方，同时代码中value的更新也会使input框中的输入内容更新。

在自定义组件使用v-model时，组件内部要检测值的改变，如果发生改变则要冒泡事件 update:modelValue，这样父组件中的v-model值就会级联更新。

export default {
  name: "categorySelect",
  props: ['modelValue'],//v-model默认绑定的props名称
  setup(props, context) {

    const state = reactive({
    })

    watch(() => props.modelValue, (newVal) => {
      context.emit('update:modelValue', newVal)
    })

    return {
      ...toRefs(state)
    }
  }
}