Vue学习笔记-自定义组件使用v-model

拆解实现

父组件

<template><div></div><Son :name="name" @inputChange="inputChange"></Son>{{ name }}
</template><script setup>
import {ref} from 'vue'
import Son from './son2.vue'const name=ref("张三")const inputChange=(value)=>{name.value=value
}
</script><style  scoped></style>

子组件

<template><div><input type="text" :value="name" @input="inputChange"></div>
</template><script setup>
defineProps(['name'])const inputChange=({target:{value}})=>{
emit('inputChange',value)
}
const emit=defineEmits(['inputChange'])</script><style  scoped></style>

 然后进行改造成我们想要的v-model形式

父组件这边

<template><div></div><!-- <Son :name="name" @inputChange="inputChange"></Son> --><Son v-model:aaa="name" age="18"></Son>{{ name }}
</template><script setup>
import {ref} from 'vue'
import Son from './son2.vue'const name=ref("张三")const inputChange=(value)=>{name.value=value
}
</script><style  scoped></style>

注意和之前的父组件内容进行对比

再来到子组件这里

<template><div><!-- <input type="text" :value="name" @input="inputChange"> --><input type="text" :value="aaa" @input="inputChange"></div>
</template><script setup>
// defineProps(['name'])// const emit=defineEmits(['inputChange'])
//v-model必须要使用update:开头
//然后跟上对应的v-model的属性名
const emit=defineEmits(['update:aaa'])
//这个时候defineProps接收的是v-model传过来的值
//注意:v-model传功来的属性和父子传值的属性不能重名//aaa 就是v-model的值
//age 就是 父子传值的属性defineProps(['aaa','age'])const inputChange=({target:{value}})=>{
emit('update:aaa',value),
console.log({target:{value}});
console.log("value",value);
console.log("target",event.target);
//{target:{value}} 解构赋值
console.log(event.target.value===value);
}</script><style  scoped></style>

这样就完成了自定以组件的双向绑定。

其中,有几个需要注意的地方,就是使用defineProps()时,注意区分v-model的值和父子传值的属性。

还有就是那个update:aaa中的update,这里使用update是vue框架官方的写法,如果想要叫其他值,就还需要父组件传递对应的事件@custom-update:myValue="someData = $event",过程也比较繁琐,这里只是说明为什么那里要叫update。在实际的开发中还是使用这种固定命名的比较便于开发。

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

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

相关文章

为什么需要重写equals和如何重写equals

首先先看Java中的 &#xff0c;比较的两个对象的地址值。 如果是基本数据类型&#xff0c;那么就是比较的是值。 如果是引用数据类型&#xff0c;比较的就是地址. object类中的equals方法也是用的&#xff1b; 所以要比较两个对象的大小&#xff0c;去调用默认的equals方法…

C#桌面应用开发:番茄定时器

C#桌面应用开发&#xff1a;番茄定时器 1、环境搭建和工程创建&#xff1a; 步骤一&#xff1a;安装visual studio2022 步骤二&#xff1a;新建工程 2、制作窗体部件 *踩过的坑&#xff1a; &#xff08;1&#xff09;找不到工具箱控件&#xff0c;现象如下&#xff1a;…

虚幻引擎在建筑和房地产中的五大颠覆性应用:探索新时代的优势

最初&#xff0c;虚幻引擎作为一个强大的游戏开发工具出现。它不断推动虚拟环境的可能性边界。正因如此&#xff0c;它的使用自然而然地超越了游戏开发&#xff0c;涵盖了包括建筑工程在内的其他行业。那么&#xff0c;在建筑和房地产领域使用虚幻引擎有哪些好处呢&#xff1f;…

代码随想录day36

题目一 上边、左边初始化为1 采用求和进行dp运算 class Solution(object):def uniquePaths(self, m, n):""":type m: int:type n: int:rtype: int"""dp [[0]*n for _ in range(m)]for i in range(m):dp[i][0] 1for j in range(n):dp[0][j] 1…

逻辑回归模型(非回归问题,而是解决二分类问题)

目录&#xff1a; 一、Sigmoid激活函数&#xff1a;二、逻辑回归介绍&#xff1a;三、决策边界四、逻辑回归模型训练过程&#xff1a;1.训练目标&#xff1a;2.梯度下降调整参数&#xff1a; 一、Sigmoid激活函数&#xff1a; Sigmoid函数是构建逻辑回归模型的重要激活函数&am…

mysql查询语句执行流程

流程图 连接器&#xff1a;建立连接&#xff0c;管理连接、校验用户身份&#xff1b;查询缓存&#xff1a;查询语句如果命中查询缓存则直接返回&#xff0c;否则继续往下执行。MySQL 8.0 已删除该模块&#xff1b;解析 SQL&#xff0c;通过解析器对 SQL 查询语句进行词法分析、…

充电宝哪个牌子公认质量好?哪家充电宝好用?4款口碑好充电宝

在如今这个电子设备不离手的时代&#xff0c;充电宝成为了我们生活中的必备品。然而&#xff0c;面对市场上琳琅满目的充电宝品牌和型号&#xff0c;选择一款质量可靠、性能出色的充电宝并非易事。大家都在问&#xff1a;充电宝哪个牌子公认质量好&#xff1f;哪家充电宝好用&a…

【第四届会后4个月检索】第五届计算机网络安全与软件工程国际学术会议(CNSSE 2025)

第五届计算机网络安全与软件工程国际学术会议&#xff08;CNSSE 2025&#xff09; 2025 5th International Conference on Computer Network Security and Software Engineering 重要信息 大会官网&#xff1a;www.cnsse.org 大会时间&#xff1a;2025年2月21-23日 会议地点&…

WANGLS

DHCP 动态主机配置协议 原理 网络 网络是双向的,网络是有方向的 广播;广播是由种类的,广播是有范围的的 租约的建立——租约的相应、租约的选择——租约的完成 租约的建立:租约的请求 有客户端发出 DHCP discover 广播、寻找服务器 租约的响应 收到响应,不是服务器,…

电阻负载柜的主要特性和参数是什么?

电阻负载柜作为重要的电力测试仪器&#xff0c;其主要特性和参数对于理解其功能和应用至关重要。以下是对电阻负载柜主要特性和参数的详细阐述&#xff1a; 主要特性 高精度测量&#xff1a;电阻负载柜通常配备高精度的电压、电流和功率因数测量系统&#xff0c;能够准确反映被…

进程切换与环境变量(一)

目录 一、进程切换 前提引入 二、环境变量 1.查看环境变量的方法 2.什么是环境变量 3.一些常见的环境变量 1.PATH 2.HOME 3.USER 4.SHELL 4.和环境变量有关的指令 1.echo: 2.export 3. unset: 4.env 5.set 5.知识补充命令行参数 为什么要有命令行参数 &…

vite+vue3拍照上传到nodejs服务器

一:效果展示: 拍照效果 二:Nodejs后端接口代码: 三:前端完整代码:

数字化打破传统,引领企业跨界经营与行业生态盈利

在当今数字化时代&#xff0c;传统的赚货差思路正面临着巨大的挑战。然而&#xff0c;数字化的崛起为企业提供了突破传统束缚的机会&#xff0c;促使其转向跨界经营&#xff0c;并通过行业生态经营获取利润。 首先&#xff0c;数字化打破了传统赚货差思路的局限性。以往&…

科普文:分布式系统的架构设计模式

一、分布式架构基本概念 分布式架构是一种计算机系统设计方法&#xff0c;它将一个复杂的系统划分为多个自治的组件或节点&#xff0c;并通过网络进行通信和协作。每个组件或节点在功能上可以相互独立&#xff0c;但又能够通过消息传递或共享数据来实现协同工作。分布式架构主要…

用XDR的思路保护API安全

云计算飞速发展的今天&#xff0c;越来越多应用程序已经转为选择云原生架构&#xff0c;这就少不了Serverless、微服务、API等技术的协助。 但同时也有越来越多的企业认识到&#xff0c;一定程度的“API安全”在整体安全与合规态势中发挥着至关重要的作用。然而&#xff0c;对…

RockYou2024 发布史上最大密码凭证

参与 CTF 的每个人都至少使用过一次臭名昭著的rockyou.txt单词表&#xff0c;主要是为了执行密码破解活动。 该文件是一份包含1400 万个唯一密码的列表。 源自 2009 年的 RockYou 黑客攻击&#xff0c;创造了计算机安全历史。 多年来&#xff0c;“rockyou 系列”不断发展。…

C++ | Leetcode C++题解之第221题最大正方形

题目&#xff1a; 题解&#xff1a; class Solution { public:int maximalSquare(vector<vector<char>>& matrix) {if (matrix.size() 0 || matrix[0].size() 0) {return 0;}int maxSide 0;int rows matrix.size(), columns matrix[0].size();vector<…

WebStorm 2024 for Mac JavaScript前端开发工具

Mac分享吧 文章目录 效果一、下载软件二、开始安装1、双击运行软件&#xff08;适合自己的M芯片版或Intel芯片版&#xff09;&#xff0c;将其从左侧拖入右侧文件夹中&#xff0c;等待安装完毕2、应用程序显示软件图标&#xff0c;表示安装成功3、打开访达&#xff0c;点击【文…

【源码下载】瓦房店农村电商大数据平台模板

技术详细实现可在评论区留言。 概述 用 echarts 和 jquery 实现的大屏模板效果。 部分代码展示&#xff0c;访问 dt.sim3d.cn 获取源码&#xff1a; (function($){$.extend({initMapChartPath : function(options){var defs {domId : ,mapName:china,mapCenter:["5…

FAO(脂肪酸β-氧化,Fatty acid beta-oxidation)应用实例

一、FAOBlue及其香豆素衍生物的吸收光谱和荧光光谱 在PBS缓冲液&#xff08;pH 7.4&#xff09;中&#xff0c;FAO代谢后释放的FAOBlue和香豆素衍生物的吸收光谱&#xff08;左&#xff09;、荧光光谱&#xff08;右&#xff09;。 FAOBlue经过FAO转化为香豆素衍生物后&#…