vue3组件的数据双向绑定

第一步 在组件中向props添加modelValue属性

代码语言：javascript复制

export default defineComponent({
  props: {
    modelValue: String
  },

在组件更新值的时候，发送一个update:modelValue的事件

代码语言：javascript复制

<input type="text" class="form-control"
    :class="{'is-invalid': inputRef.error}"
    :value="inputRef.val"
    @input="updateValue"
    @blur="validateInput">
    <span v-if="inputRef.error" class="invalid-feedback">{{inputRef.message}}</span>

代码语言：javascript复制

setup (props, context) {
    const inputRef = reactive({
      val: props.modelValue || '',
      error: false,
      message: ''
    })
    const updateValue = (e: KeyboardEvent) => {
      const targetValue = (e.target as HTMLInputElement).value
      inputRef.val = targetValue
      context.emit('update:modelValue', targetValue)
    }

在父组件使用v-model

代码语言：javascript复制

<validate-input :rules="emailRules" v-model="emailVal"></validate-input>
    {{emailVal}}

代码语言：javascript复制

 setup () {
    const emailVal = ref('')
    return {
      emailVal
    }
  }

model 事件

0 人点赞