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

Vue3 双向绑定

需求:父和子实现双向数据绑定 (Vue3.4+)

  单参数实现:

父组件------------------<UserNamev-model:first-name="first"v-model:last-name="last"
/>子组件:------------<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script><template><input type="text" v-model="firstName" /><input type="text" v-model="lastName" />
</template>

2、对象传递


对象:interface Obj{username:'',password:''
}父组件---------------------------
<UserNamev-model:first-name="first"v-model:last-name="last"v-model:obj='userInfo'
/>
<script setup>const userInfo=ref<obj>({username:'张三',password:'123456'
})
</script>子组件----------------------------------
const userInfo=defineModel<String[]>("ojb", {type: Array,default: () => [],
});<template><input type="text" v-model="firstName" /><input type="text" v-model="lastName" />
</template>

注:defineModel:返回的对象ref的,在script中使用时需要加.value获取值,如果是对象传值必须加默认值

相关文章:

  • 【Qt】【模型视图架构】代理模型
  • 文件上传之使用一个属性接收多个文件
  • Python课设-学生信息管理系统
  • 申请高德地图API的Key并加以接口调用的方法
  • 深入分析 Android Service (完)
  • WordPress plugin MStore API SQL注入漏洞复现(CVE-2023-3077)
  • axios七大特性
  • Golang 协程和 Channel 的协同工作
  • Facebook开户 | Facebook二不限户
  • java —— 匿名内部类与 Lambda 表达式
  • python-最接近target的值
  • R语言绘图 --- 柱状图(Biorplot 开发日志 --- 3)
  • Tree——输出项目的文件结构(Linux)
  • 多项目的.net core解决方案(项目间引用)如何使用Docker部署
  • keepalived安装文档
  • [笔记] php常见简单功能及函数
  • Git学习与使用心得(1)—— 初始化
  • Java,console输出实时的转向GUI textbox
  • java8 Stream Pipelines 浅析
  • Laravel 菜鸟晋级之路
  • Spring-boot 启动时碰到的错误
  • V4L2视频输入框架概述
  • Vim 折腾记
  • vue+element后台管理系统,从后端获取路由表,并正常渲染
  • 阿里研究院入选中国企业智库系统影响力榜
  • 类orAPI - 收藏集 - 掘金
  • 如何用vue打造一个移动端音乐播放器
  • 使用 Node.js 的 nodemailer 模块发送邮件(支持 QQ、163 等、支持附件)
  • 学习笔记:对象,原型和继承(1)
  • 用mpvue开发微信小程序
  • 【干货分享】dos命令大全
  • mysql 慢查询分析工具:pt-query-digest 在mac 上的安装使用 ...
  • 带你开发类似Pokemon Go的AR游戏
  • 蚂蚁金服CTO程立:真正的技术革命才刚刚开始
  • 容器镜像
  • 通过调用文摘列表API获取文摘
  • #13 yum、编译安装与sed命令的使用
  • #git 撤消对文件的更改
  • #ifdef 的技巧用法
  • #QT(TCP网络编程-服务端)
  • (¥1011)-(一千零一拾一元整)输出
  • (Arcgis)Python编程批量将HDF5文件转换为TIFF格式并应用地理转换和投影信息
  • (笔试题)合法字符串
  • (超简单)构建高可用网络应用:使用Nginx进行负载均衡与健康检查
  • (二)windows配置JDK环境
  • (附源码)springboot青少年公共卫生教育平台 毕业设计 643214
  • (附源码)ssm户外用品商城 毕业设计 112346
  • (回溯) LeetCode 40. 组合总和II
  • (介绍与使用)物联网NodeMCUESP8266(ESP-12F)连接新版onenet mqtt协议实现上传数据(温湿度)和下发指令(控制LED灯)
  • (一)、软硬件全开源智能手表,与手机互联,标配多表盘,功能丰富(ZSWatch-Zephyr)
  • (原創) X61用戶,小心你的上蓋!! (NB) (ThinkPad) (X61)
  • ****** 二 ******、软设笔记【数据结构】-KMP算法、树、二叉树
  • ./mysql.server: 没有那个文件或目录_Linux下安装MySQL出现“ls: /var/lib/mysql/*.pid: 没有那个文件或目录”...
  • .md即markdown文件的基本常用编写语法
  • .NET COER+CONSUL微服务项目在CENTOS环境下的部署实践