当前位置: 首页 > news >正文

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

父组件

<script setup>const txt = ref('');</script><template><CustomInput v-model="txt" /></template>

子组件

defineProps defineEmits

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

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

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

<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 方法需触发相应的事件

子组件

<script setup>
const value = computed({get() {return props.modelValue},set(value) {emit("update:modelValue", value)}
})
</script><template><input v-model="value" />
</template>

v-model 绑定多个属性

父组件

<template><CustomInput v-model:first-name="first" v-model:last-name="last" />
</template>

子组件

 <script setup>const props = defineProps({firstName: String,lastName: String,
})
// 在computed中 使用
const emit = defineEmits(['update:firstName', 'update:lastName'])
</script><template><inputtype="text":value="firstName"@input="$emit('update:firstName', $event.target.value)"/><inputtype="text":value="lastName"@input="$emit('update:lastName', $event.target.value)"/>
</template>

参考:

搞懂 vue3 中 v-model 的用法

http://www.dtcms.com/a/292657.html

相关文章:

  • Android ViewModel 深度解析:原理、使用与最佳实践
  • Android 中 实现日期选择功能(DatePickerDialog/MaterialDatePicker)
  • “鱼书”深度学习入门 笔记(2)第五章
  • MoonBit Meetup 杭州站丨 探讨AI基础软件的精彩回顾
  • API是什么,如何保障API安全?
  • 解决flex布局的元素高度超出父元素高度
  • AI网关是什么?为何而生?企业为什么需要AI网关?
  • 使用Kiro开发项目
  • SQL基础入门③ | 排序篇
  • 基于mysql云数据库创建和美化表格,对比分析Power BI和Quick BI的功能优劣
  • PACKET_HOST等宏定义介绍
  • 草稿!Linux网络系统总结!
  • 碰一碰发视频源码搭建:支持OEM
  • 10.Java中的反射
  • 深度学习-全连接神经网络2
  • 使用EasyExcel导出明细数据
  • gpt面试题
  • 【学习路线】Python全栈开发攻略:从编程入门到AI应用实战
  • 深度学习篇---车道线循迹
  • 快速了解pandas库
  • opencv简介(附电子书资料)
  • VS Code 美化插件
  • Java (Spring AI) 实现MCP server实现数据库的智能问答
  • SpringAOP的实现原理和场景
  • 《汇编语言:基于X86处理器》第9章 字符串和数组(2)
  • 服务器租用:网络钓鱼具体是指什么?
  • Linux 内核与底层开发
  • Linux 下分卷压缩与解压缩全指南:ZIP 与 TAR.GZ 实战
  • Python趣味算法:实现任意进制转换算法原理+源码
  • Spring Boot环境搭建与核心原理深度解析