[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 的用法

相关推荐
AnalogElectronic21 小时前
vue3 实现贪吃蛇 电脑版01
javascript·vue.js·ecmascript
一 乐21 小时前
商城推荐系统|基于SprinBoot+vue的商城推荐系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·后端·商城推荐系统
Dragon Wu21 小时前
Taro 自定义tab栏和自定义导航栏
前端·javascript·小程序·typescript·前端框架·taro
开发者小天1 天前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
武清伯MVP1 天前
阮一峰《TypeScript 教程》学习笔记——类型映射
笔记·学习·typescript
程序员杨工1 天前
【原创】SpringBoot3+Vue3客户管理系统
vue.js·springboot
theOtherSky1 天前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节
Pu_Nine_91 天前
Vue 3 + TypeScript 项目性能优化全链路实战:从 2.1MB 到 130KB 的蜕变
前端·vue.js·性能优化·typescript·1024程序员节
一个处女座的程序猿O(∩_∩)O1 天前
Vue CLI 插件开发完全指南:从原理到实战
前端·javascript·vue.js