[vue3] 自定义组件的v-model

父组件

ts 复制代码
<script setup>
    const txt = ref('');
 </script>
 
 <template>
  <CustomInput v-model="txt" />
 </template>

子组件

defineProps defineEmits

<CustomInput> 组件内部需要做两件事:

将内部原生 <input> 元素的 value attribute 绑定到 modelValue prop

当原生的 input 事件触发时,触发一个携带了新值的 update:modelValue 自定义事件

ts 复制代码
<script setup>
const props = defineProps({
  'modelValue': String,
})
const emit = defineEmits(["update:modelValue"])
</script>

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

另一种在组件内实现 v-model 的方式是使用一个可写的,同时具有 getter 和 setter 的 computed 属性

computed 绑定

使用computed 属性时, get 方法需返回 modelValue prop,而 set 方法需触发相应的事件

子组件

ts 复制代码
<script setup>
const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit("update:modelValue", value)
  }
})
</script>

<template>
 <input v-model="value" />
</template>

v-model 绑定多个属性

父组件

ts 复制代码
<template>
    <CustomInput v-model:first-name="first" v-model:last-name="last" />
</template>

子组件

ts 复制代码
 <script setup>
 const props = defineProps({
  firstName: String,
  lastName: String,
})
// 在computed中 使用
const emit = defineEmits(['update:firstName', 'update:lastName'])
</script>

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

参考:

搞懂 vue3 中 v-model 的用法

相关推荐
excel7 小时前
dep.ts 逐行解读
前端·javascript·vue.js
前端大卫7 小时前
一个关于时区的线上问题
前端·javascript·vue.js
IT派同学8 小时前
TableWiz诞生记:一个被表格合并逼疯的程序员如何自救
前端·vue.js
铅笔侠_小龙虾11 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js
sniper_fandc13 小时前
Axios快速上手
vue.js·axios
Kitasan Burakku13 小时前
Typescript return type
前端·javascript·typescript
醒了接着睡16 小时前
Vue3 响应式中的 Reactive
vue.js
paopaokaka_luck17 小时前
基于SpringBoot+Vue的志行交通法规在线模拟考试(AI问答、WebSocket即时通讯、Echarts图形化分析、随机测评)
vue.js·人工智能·spring boot·后端·websocket·echarts
程序定小飞17 小时前
基于springboot的蜗牛兼职网的设计与实现
java·数据库·vue.js·spring boot·后端·spring
星光不问赶路人21 小时前
一文搞清楚 TypeScript 中 triple-slash 与 tsconfig.types 有何区别?
typescript·vite