vue3自定义v-model

vue3自定义v-model的用法

先写一个子组件CustInput.vue

<script setup>
const props = defineProps({
  modelValue: String
})
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <div>
    <input
      type="text"
      :value="modelValue"
      @input="emit('update:modelValue', $event.target.value)"
    />
  </div>
</template>

在App.vue组件中使用

<template>
  <p>这是父组件的name:{{ name }}</p>
  <CustInput v-model="name" />
</template>
<script setup>
import { ref } from 'vue'
import CustInput from './components/CustInput.vue'
const name = ref('zhangsan')
</script>

实现效果如下：

以上代码是vue3.4版本之前的用法，但在vue3.4之后的写法有所改变如下面代码
子组件CustInput.vue代码

<script setup>
//通过defineModel宏函数来接收父组件的参数
const name = defineModel('name')
const age = defineModel('age')
</script>

<template>
  <div>
    <input type="text" v-model="name" />
    <input type="text" v-model="age" />
  </div>
</template>

父组件App调用代码如下

<template>
  <p>这是父组件的name:{{ name }}</p>
  <p>这是父组件的age:{{ age }}</p>
  <CustInput v-model:name="name" v-model:age="age" />
</template>
<script setup>
import {  ref } from 'vue'
import CustInput from './components/CustInput.vue'
const name = ref('zhangsan')
const age = ref(20)
</script>