Vue3实战笔记(56)—实战:DefineModel的使用方法细节

文章目录

  • 前言
  • 一、实战DefineModel
  • 二、思考原理
  • 总结


前言

今天写个小例子,实战DefineModel的使用方法细节


一、实战DefineModel

上文官方说的挺清楚,实战验证一下,新建DefineModel.vue(这是儿子):


<template><div><div>parent bound v-model is: {{ model }}</div><v-btn @click="update" color="light-green">点我更新儿子</v-btn></div>
</template><script setup lang="ts" name="">
const model:any = defineModel()function update() {model.value++
}
</script><style lang='scss' scoped>
</style>

再更改一下之前的about.vue测试(这是父亲):


<template><div><h3>About</h3><h3>姓名:{{userStore.name}}</h3><h3>简介:{{profile}}</h3><h3>年龄:{{age}}</h3><DefineModel v-model="age" /><v-btn @click="update" color="red" class="mt-3">点我更新父亲</v-btn></div>  </template><script setup lang='ts' name="About">
function update(){age.value++
}
const age = ref(1);
import DefineModel from './study/defineModel.vue';
import { ref } from 'vue';</script><style lang='less' scoped>
</style>

运行:
在这里插入图片描述
点击父和子组件的按钮更新值age都会变化:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、思考原理

为什么

const model = defineModel()

就绑定到了父的v-model了呢,因为defineModel 是一个便利宏。编译器将其展开为以下内容:

一个名为 modelValue 的 prop,本地 ref 的值与其同步;

一个名为 update:modelValue 的事件,当本地 ref 的值发生变更时触发。

在 3.4 版本之前,你一般会按照如下的方式来实现上述相同的子组件:


<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script><template><input:value="props.modelValue"@input="emit('update:modelValue', $event.target.value)"/>
</template>

这也是刚刚断点时候这个属性的解释:
在这里插入图片描述
但是注意我们子组件属性的名字是随意的,例如:

const childage:any = defineModel()

那么:


<template><div><h3>parent bound v-model is: {{ childage }}</h3><v-btn @click="update" color="light-green">点我更新儿子</v-btn></div>
</template><script setup lang="ts" name="">
const childage:any = defineModel()function update() {childage.value++
}
</script><style lang='scss' scoped>
</style>

运行:

在这里插入图片描述
是不影响功能的。我开始对这里理解有点误解,备忘。

如果不想用默认的modelValue,也可以传递一个有意义的名字:

父:


<DefineModel v-model:childage="age" />

儿砸:


const childage:any = defineModel('childage')

在这里插入图片描述


总结

这样一来,通过 defineModel,子组件无需显式声明 props 和 emits,就能实现与父组件之间的自动双向绑定。

草长莺飞二月天,拂堤杨柳醉春烟 儿童散学归来早,忙趁东风放纸鸢

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/20808.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

go map 如何比较两个 map 相等

go map 如何比较两个 map 相等 都为 nil非空、长度相等&#xff0c;指向同一个 map 实体对象相应的 key 指向的 value 相等 直接将使用 map1 map2 是错误的。这种写法只能比较 map 是否为 nil。因此只能是遍历map 的每个元素&#xff0c;比较元素是否都是深度相等。

C++核心编程之类和对象一

C核心编程之类和对象一 文章目录 C核心编程之类和对象一1.类1.类的组成2.类的访问权限3.class和struct的区别 1.类 1.类的组成 一个类通常由属性&#xff08;也叫成员属性&#xff09;和行为&#xff08;成员函数、成员方法&#xff09;组成&#xff0c;类有不同的访问权限&a…

Facebook开户 | Facebook二不限户

Facebook二不限户的正确使用方法 Facebook 二不限是指 Facebook 国内二不限户&#xff0c;是通过代理开出来的一种特殊账户&#xff0c;️需要广告主准备主页。 其特点是&#xff1a;限主页、不限域名、额度没解限&#xff0c;解限后则不限额度。 相比于三不限户&#xff0c;…

封装PHP用于发送GET和POST请求的公共方法

封装了ThinkPHP用于发送GET和POST请求的公共方法。这个方法可以放在你的公共函数文件中&#xff0c;或者创建一个独立的类来管理这些请求。 <?php namespace app\common\utils;use think\facade\Log; use think\exception\HttpException;class HttpRequest {/*** 发送GET请…

开源日志分析平台ELK实战应用

1.开源日志分析平台ELK概述及搭建过程 ELK 是一个开源的日志管理平台,由 Elasticsearch、Logstash 和 Kibana 三个组件组成。这个平台广泛用于实时日志处理和分析。下面简单介绍一下每个组件的作用以及如何搭建一个基本的 ELK 栈。 ELK 组件 Elasticsearch:是一个搜索和分析…

Pycharm的基础设置+Pycharm与AutoDL服务器连接

一.pycharm的基础设置 1.下载pycharm profession版&#xff0c;配置之前博客里面的解释器mask2 2.run detect.py 3.终端的设置 &#xff08;1&#xff09;先直接在终端里面pip install 我们再创建一个测试python文件&#xff1a;terninal_test.py 虽然上面安装成功了包&#x…

GNU Radio创建qt time plot python OOT块

文章目录 前言一、创建自定义的 OOT 块1、安装相应依赖2、创建 OOT 块3、修改相关4、编译及安装 OOT 块 二、测试1、grc 图2、运行结果 三、资源自取 前言 官方提供的绘制时域波形的 block 名字叫做 QT GUI Time Sink&#xff0c;其底层实现是用 C 写的&#xff0c;但是我发现…

回归预测 | MATLAB实现基于GOOSE-LightGBM的多特征输入单输出数据回归预测(鹅优化算法)

回归预测 | MATLAB实现基于GOOSE-LightGBM的多特征输入单输出数据回归预测(鹅优化算法) 目录 回归预测 | MATLAB实现基于GOOSE-LightGBM的多特征输入单输出数据回归预测(鹅优化算法)效果一览基本介绍程序设计参考资料 效果一览 基本介绍 MATLAB实现基于LightGBM算法的数据回归预…

AI办公自动化:用通义千问Qwen-Long批量总结PDF长文档内容

Qwen-Long是在通义千问针对超长上下文处理场景的大语言模型&#xff0c;支持中文、英文等不同语言输入&#xff0c;支持最长1000万tokens(约1500万字或1.5万页文档)的超长上下文对话。配合同步上线的文档服务&#xff0c;可支持word、pdf、markdown、epub、mobi等多种文档格式的…

查看VUE3代理后真正请求的URL

在vite.config.ts中添加如下配置&#xff1a; server: {host: "0.0.0.0", // 指定服务器应该监听哪个 IP 地址port: 8848, // 指定开发服务器端口open: true, // 开发服务器启动时&#xff0c;自动在浏览器中打开应用程序cors: true,// Load proxy configuration fr…

无人售货机零售业务成功指南:从市场分析到创新策略

在科技驱动的零售新时代&#xff0c;无人售货机作为一种便捷购物解决方案&#xff0c;正逐步兴起&#xff0c;它不仅优化了消费者体验&#xff0c;还显著降低了人力成本&#xff0c;提升了运营效能。开展这项业务前&#xff0c;深入的市场剖析不可或缺&#xff0c;需聚焦消费者…

【JS基础语法02】JS变量详解

一&#xff1a;变量命名规则与规范 1 规则 可以以下划线、字母、数字、$符命名&#xff0c;不能以数字开头不能以关键字命名&#xff0c;eg&#xff1a;let、var、const命名严格区分大小写&#xff0c;age、AGE是两个不同的变量名 2 规范(并不是规则&#xff0c;而是都应该遵…

openresty(Nginx) 配置 特殊URL 密码访问 使用htpasswd 配置 Basic_Auth登录认证

1 使用htpasswd 生成密码文件.htpasswd是Apache附带的工具。如果没有可以安装。 #centos 8.5 系统 yum install httpd-tools #Ubuntu 24.04 系统 sudo apt update sudo apt-get install apache2-utils #生成密码文件,用户test sudo htpasswd -c /usr/local/openresty/nginx/…

解析Java中1000个常用类:SafeVarargs类,你学会了吗?

在 Java 编程中,泛型和可变参数(varargs)的结合使用可能会导致一些类型安全的问题。为了解决这些问题,Java 提供了 @SafeVarargs 注解。本文将详细介绍 @SafeVarargs 注解的定义、使用方法、应用场景以及其背后的原理,帮助读者深入理解并掌握这一重要特性。 什么是 @Safe…

高效派单的秘诀:探索运维工单处理软件的五大关键功能-亿发

在快节奏的现代企业运营中&#xff0c;如何高效管理生产流程&#xff0c;确保任务按时完成&#xff0c;同时保持产品质量和客户满意度&#xff0c;是每个管理者面临的重要课题。工单管理系统&#xff0c;作为企业数字化转型的关键工具&#xff0c;正逐渐成为解决这些问题的利器…

TypeScript 中的高级类型

1. 联合类型和交叉类型 联合类型&#xff08;Union Types&#xff09;和交叉类型&#xff08;Intersection Types&#xff09;是 TypeScript 中常用的两种高级类型。 联合类型&#xff1a;使用 | 操作符将多个类型合并成一个新的类型&#xff0c;表示值可以是这些类型中的任意…

C++——输入输出、基本变量类型

目录 一、输入输出 1、标准输出流&#xff08;cout&#xff09; 2、标准输入流&#xff08;cin&#xff09; 3、标准错误流&#xff08;cerr&#xff09;和标准日志流&#xff08;clog&#xff09; 4、示例代码 二、基本数据类型 1、宽字符的用法 2、如何使用 3、示例…

构建基础网站的入门指南

在数字时代&#xff0c;网站已经成为展示个人、企业或组织信息的重要平台。了解如何通过编写代码来创建一个网站是非常有用的技能。在本文中&#xff0c;我们将了解构建一个基础网站所需的步骤和代码知识。第一步&#xff1a;了解网站的基本组成 一个基本的网站通常包含HTML&a…

【GPU原理】1.线程和缓存的关系

一、GPU如何做并行计算 1.简单的串行计算 对于如上的运算AXY&#xff0c;每次运算我们需要从内存读取两个数据&#xff0c;一个是x[i]&#xff0c;一个是y[i]&#xff0c;最后存回y[i]。这里面有一个FMA的操作&#xff08;融合乘加&#xff08;FMA&#xff09;指令是RISC处理器…

【区分vue2和vue3下的element UI InputNumber 计数器组件,分别详细介绍属性,事件,方法如何使用,并举例】

在 Vue 2 中&#xff0c;Element UI 提供了 el-input-number 组件作为计数器组件&#xff0c;用于处理数字输入。而在 Vue 3 中&#xff0c;Element Plus 同样提供了类似的组件&#xff0c;但可能有一些属性、事件或方法的细微差异。下面我将分别介绍 Vue 2 的 Element UI 和 V…