Vue3自定义组件v-model双向绑定

无能吐槽一下,虽然用了很多遍v-model,但是还是不得要领,每次看官网都感觉说的不是很清晰,在写的时候还是要查看文档,可能就是不理解原理,这次特意好好写一篇文章,让自己好好理解一下。

自定义一个组件

假设我们自定义一个搜索框组件,样式肯定是比input 标签本身的好看,在配上搜索按钮
在这里插入图片描述
这里的代码就不描述了

组件需要参数吧

搜索框输入的文本你怎么告诉别人,双向绑定呗

  1. 定义一个参数,组件定义参数 defineProps,没错吧
 <template><div class="search_btn"><div class="search_icon" /><input /></div>
</template><script setup lang="ts">
defineProps({searchWord: {type: String,required: false}
});
</script>
  1. 在给input 框绑定上这个参数 :value=“searchWord”,这样你在你定义的组件里面不就能获取到输入的值了吗
 <template><div class="search_btn"><div class="search_icon" /><input :value="searchWord" /></div>
</template><script setup lang="ts">
defineProps({searchWord: {type: String,required: false}
});
</script>

别人用你的组件参数变化了你得告诉别人吧

  1. defineEmits 定义一个事件呗
const emits = defineEmits(['update:searchWord']);
  1. 啥时候通知啊,文本输入的有变化就通知呗,绑定@input事件
 @input="$emit('update:searchWord', $event.target.value)"
  1. 上个完整的代码
 <template><div class="search_btn"><div class="search_icon" /><input :value="searchWord" @input="$emit('update:searchWord', $event.target.value)"/></div>
</template><script setup lang="ts">
defineProps({searchWord: {type: String,required: false}
});
const emits = defineEmits(['update:searchWord']);
</script>
咋用你定义的组件啊
  <main-searchplaceholder="请输入企业名称"v-model:search-word="keyWord"/>

到这里你可能有点疑问,官方的咋没有:search-word 后面这段,可以理解为原来的就是默认值,你给了就用你的,默认值就是modelValue,如果你组件里面也叫这个,你就不用说你参数叫啥了。

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

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

相关文章

单线程传奇Redis,为何引入多线程?

大家都知道 Redis 的速度非常的快&#xff0c;这其中一个关键原因就是它采用了单线程模型&#xff0c;这也是它的一大独特之处。那么问题来了&#xff0c;既然单线程模型已经如此出色&#xff0c;为什么后续版本还要搞上多线程呢&#xff1f; 本文主要分析一下多线程在Redis中的…

ASP.NET Core 6 (.NET 6) 快速开发简单登陆和登出功能

ASP.NET Core 6中的简单登录和登出功能&#xff0c;需要使用身份验证和授权中间件实现&#xff0c; 1、添加引用 Microsoft.AspNetCore.Authentication.Cookies 使用Visual Studio 2022或更高版本开发工具&#xff0c;创建一个ASP.NET Core 6 (.NET 6) 项目&#xff0c;项目添…

推出新款H7-TOOL 2024版,同时发布新版固件V2.25(2024-02-24)

H7-TOOL 2024版介绍 1、开模定制外壳&#xff0c;取消了侧面的IO接口&#xff0c;汇集到一个主端口&#xff08;2 * 17P排针&#xff09;。 2、显示屏升级为2.8寸&#xff08;分辨率320*240)。 3、两个按键升级为4个按键&#xff1a;上键、下键&#xff0c;OK确认键和C取消键。…

npm install一直卡在 sill idealTree buildDeps

当npm install命令在安装过程中卡在sill idealTree buildDeps阶段时&#xff0c;可能的原因包括网络延迟、镜像源问题或缓存问题。以下是一些可能的解决方法&#xff1a; 检查镜像源&#xff1a; 打开命令提示符&#xff08;cmd&#xff09;窗口。 输入命令npm config get…

【大数据】Flink 内存管理(二):JobManager 内存分配(含实际计算案例)

Flink 内存管理&#xff08;二&#xff09;&#xff1a;JobManager 内存分配 1.分配 Total Process Size2.分配 Total Flink Size3.单独分配 Heap Size4.分配 Total Process Size 和 Heap Size5.分配 Total Flink Size 和 Heap Size JobManager 是 Flink 集群的控制元素。它由三…

【经验分享】分类算法与聚类算法有什么区别?白话讲解

经常有人会提到这个问题&#xff0c;从我个人的观点和经验来说2者最明显的特征是&#xff1a;分类是有具体分类的数量&#xff0c;而聚类是没有固定的分类数量。 你可以想象一下&#xff0c;分类算法就像是给你一堆水果&#xff0c;然后告诉你苹果、香蕉、橙子分别应该放在哪里…

Kotlin 基本语法5 继承,接口,枚举,密封

1.继承与重写的Open关键字 open class Product(val name:String ) {fun description() "Product: $name"open fun load() "Nothing .."}class LuxuryProduct:Product("Luxury"){//继承需要调用 父类的主构造函数override fun load(): String {…

自定义 Git Hook

前言 前端同学大概都熟悉 husky 这个工具&#xff0c;他可以直接在项目中添加 git hooks&#xff0c;主要解决了 git hooks 不会同步到 git 仓库的问题&#xff0c;保证了每个开发人员的本地仓库都能执行相同的 git hooks。 但是 husky 毕竟是一个 JS 生态的工具&#xff0c;…

ONLYOFFICE桌⾯应⽤程序v8.0:功能丰富,⽀持多平台

文章目录 可填写的 PDF 表单RTL支持电子表格中的新增功能其他改进和新增功能与 Moodle 集成用密码保护 PDF 文件快速创建文档本地界面主题总结 继 ONLYOFFICE 文档 v8.0 的发布后&#xff0c;很高兴&#xff0c;因为适用于 Linux、Windows 和 macOS 的 ONLYOFFICE 桌面应用程序…

2476. 二叉搜索树最近节点查询

Problem: 2476. 二叉搜索树最近节点查询 文章目录 思路解题方法复杂度Code 思路 找到所有节点然后再找满足要求的查询的值&#xff0c;一眼排序二分&#xff0c;看了眼数据范围&#xff0c;满足O(nlogn)。 解题方法 dfs获取所有节点的值&#xff0c;然后二分查找&#xff0c;获…

【elementUi-table表格】 滚动条 新增监听事件; 滚动条滑动到指定位置;

1、给滚动条增加监听 this.dom this.$refs.tableRef.bodyWrapperthis.dom.scrollTop 0let _that thisthis.dom.addEventListener(scroll, () > {//获取元素的滚动距离let scrollTop _that.dom.scrollTop//获取元素可视区域的高度let clientHeight this.dom.clientHeigh…

Matlab/simulink基于MPPT风光储微电网建模仿真(持续更新)

​ 2.Matlab/simulink基于MPPT风光储微电网建模仿真&#xff08;持续更新&#xff09; 1.Matlab/simulink基于vsg的风光储调频系统建模仿真&#xff08;持续更新&#xff09;

QT 打包命令 windeployqt 在windows平台应用

本文以qt6.2.4 MSVC2019 为例&#xff0c;描述打包过程。 前置条件&#xff1a;已经生成了可执行文件&#xff0c;比如xxx.exe 1.在搜索框输入QT,点击QT6.2.4(MSVC 2019 64-bit) 以你实际安装的版本为准。 2.出现如下黑屏命令行 3.在QT 项目文件下新建一个打包文件夹&#x…

VIO第2讲:IMU标定实验

VIO第2讲&#xff1a;IMU标定实验 文章目录 VIO第2讲&#xff1a;IMU标定实验5 IMU标定实验5.1 仿真数据产生5.1.1 c代码分析5.1.2 生成ros包数据 5.2 Allan方差实验&#xff08;港科大imu_utils&#xff09;5.2.1 安装5.2.2 运行 5.3 Allan方差实验&#xff08;matlab代码kali…

Vue局部注册组件实现组件化登录注册

Vue局部注册组件实现组件化登录注册 一、效果二、代码1、index.js2、App.vue3、首页4、登录&#xff08;注册同理&#xff09; 一、效果 注意我这里使用了element组件 二、代码 1、index.js import Vue from vue import VueRouter from vue-router import Login from ../vie…

基于SVM的功率分类,基于支持向量机SVM的功率分类识别,Libsvm工具箱详解

目录 支持向量机SVM的详细原理 SVM的定义 SVM理论 Libsvm工具箱详解 简介 参数说明 易错及常见问题 完整代码和数据下载链接:基于SVM的功率分类,基于支持向量机SVM的功率分类识别资源-CSDN文库 https://download.csdn.net/download/abc991835105/88862836 SVM应用实例, 基于…

虚拟机的四种网络模式对比

nat网络地址转换 nat网络 桥接 内网模式 仅主机

代码随想录算法训练营29期Day59|LeetCode 583,72

文档讲解&#xff1a;两个字符串的删除操作 编辑距离 编辑距离总结篇 583.两个字符串的删除操作 题目链接&#xff1a;https://leetcode.cn/problems/delete-operation-for-two-strings/description/ 思路&#xff1a; 本题和1143基本相同&#xff0c;只要求出两个字符串的…

经济学-股市指数为什么会对社会造成系统性风险

或许很多人有这个疑问&#xff1a;股价又不影响公司销售的收入&#xff0c;为什么股价下跌可能造成系统性风险&#xff1f;&#xff1f; 假设某上市公司A的股票100元1股&#xff0c;市值1000元&#xff08;10股&#xff09;&#xff0c;每年生产10件衣服&#xff0c;一件衣服卖…

【Java】java异常处理机制(实验五)

目录 一、实验目的 二、实验内容 三、实验小结 一、实验目的 1、理解java的异常处理机制 2、掌握try catch结构和thow和thows关键字的用法 二、实验内容 1、编写一个程序&#xff0c;输入某个班某门课程成绩&#xff0c;统计及格人数、不及格人数及课程平均分。设计一个异…