vue3 v-model及多个v-model 实现 自定义修饰符

父级组件

<template>
  <div class="num" @click="changeNum">父级改变{{ num }}</div>
  <!--                          修饰符 -->
  <ModelDemo v-model:textValue.isEmpty="textValue" v-model="num"></ModelDemo>
  <div>textValue - {{ textValue }}</div>
</template>
<script lang="ts" setup>
import ModelDemo from './ModelDemo.vue'
const num = ref<number>(10)
const textValue = ref('666')
const changeNum = () => {
  num.value ++
}
</script>

子级组件

<template>
  <div>
    <div>
        <span>子组件改变v-model{{ modelValue }}</span><el-input-number v-model="value"  @input="inputFn"></el-input-number>
    </div>
    <div>
      <span>子组件改变textInput</span>
      <el-input v-model="tValue"  @input="tValueFn"></el-input>
    </div>
  </div>
</template>
<script lang="ts" setup>
// 直接在 defineProps 泛型里定义
const props = defineProps<{
  modelValue: number,
  textValue: string,
  textValueModifiers?: { // 绑定哪个固定在哪个后面加Modifiers
    isEmpty: boolean
  }
}>()

const $emit = defineEmits(['update:modelValue', 'update:textValue'])
const value = ref<number>(0)
const inputFn = (val: number) => {
  console.log(val)
  $emit('update:modelValue', val)
}

const tValue = ref<string>('')
const tValueFn = (val: string) => {
  console.log(val)
  $emit('update:textValue', props.textValueModifiers?.isEmpty && !val && '现在input框为空哦' || val)
}
</script>