【Vue3】组件通信之v-model

【Vue3】组件通信之v-model

  • 背景
  • 简介
  • 开发环境
  • 开发步骤及源码
  • 总结

背景

随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。本文内容并非完全原创,大多是参考其他文章资料整理所得,感谢每位技术人的开源精神。

简介

本文介绍 Vue3 中如何使用 v-model 实现组件间通信,即组件间相互传数据。

Vue3 中组件间通信包括:

  • 父组件向子组件传数据,实现方案有:
    • props
    • v-model
    • $refs
    • 默认插槽 / 具名插槽
  • 子组件向父组件传数据
    • props
    • v-model
    • $parent
    • 自定义事件
    • 作用域插槽
  • 父组件与子组件的子组件互传数据,即与孙子组件互传数据
    • $attrs
    • provider & inject
  • 任意组件间传数据
    • mitt
    • Pinia

开发环境

分类名称版本
操作系统WindowsWindows 11
IDEVisual Studio Code1.91.1

开发步骤及源码

1> 创建 Vue3 工程,参考:【Vue3】工程创建及目录说明。

2> 删除 src 目录下 assetscomponents 目录。

3> 修改 src 目录下 main.ts

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

4> 定义子组件,接收来自父组件的数据。

<template><div class="content"><h1>子组件</h1><span>用户名:</span><input type="text" :value="modelValue"@input="emits('update:modelValue', (<HTMLInputElement>$event.target).value)" /></div>
</template><script setup lang="ts">
defineProps(['modelValue'])
const emits = defineEmits(['update:modelValue'])
</script><style scoped lang="scss">
.content {background-color: greenyellow;padding: 20px;input {border: 3px solid red;height: 30px;line-height: 30px;width: 300px;}
}
</style>

父组件通过 v-model 向子组件传数据,Vue3 框架默认 v-model 传的数据名为 modelValue,对应事件名为 update:modelValue,所以子组件需要使用 defineProps 函数声明接收来自父组件的数据 modelValue,使用 defineEmits 函数声明接收来自父组件的事件 update:modelValue
触发事件函数的参数是 $event.target.value,即子组件中 DOM(input)事件对象的值。
注意:需要执行 npm install -D sass 命令安装 CSS 预处理器。

5> 修改 Vue 根组件 src/App.vue,使用 v-model 向子组件传数据。

<template><div class="parent"><Login v-model="username" /></div>
</template><script setup lang="ts">
import Login from './components/Login.vue'
import { ref, watch } from 'vue'const username = ref('administrator')
watch(username, (newValue, oldValue) => {console.log('username changed from', oldValue, 'to', newValue)
})
</script><style scoped lang="scss">
.parent {background-color: orange;padding: 20px;
}
</style>

以上代码中 <Login v-model="username" /> 等同于 <Login :modelValue="username" @update:modelValue="username = $event" />,后者为 v-model 的本质。

6> 执行命令 npm run dev 启动应用,浏览器访问:http://localhost:5173/
在这里插入图片描述
页面初始化时 <input> 框内显示来自父组件的数据 administrator,每次修改 <input> 框中数据,控制台便会打印出数据变化日志,此日志为 App.vue 打印的,表明父组件也收到了子组件传来的修改后的变更数据。

7> Vue3 默认 v-model 数据名是 modelValue,此名称可以自定义。自定义 v-model 数据名便于在同一组件标签上使用多个 v-model 属性传数据,修改 App.vue 向子组件传两个数据。

<template><div class="parent"><Login v-model:account="username" v-model:credential="password" /></div>
</template><script setup lang="ts">
import Login from './components/Login.vue'
import { ref, watch } from 'vue'const username = ref('administrator')
const password = ref('00000000')
watch([username, password], (newValue, oldValue) => {console.log('username changed from', oldValue, 'to', newValue)
})
</script><style scoped lang="scss">
.parent {background-color: orange;padding: 20px;
}
</style>

8> 修改子组件,声明接收父组件的两个数据并进行处理。

<template><div class="content"><h1>子组件</h1><span>用户名:</span><input type="text" :value="account"@input="emits('update:account', (<HTMLInputElement>$event.target).value)" /><span>密码:</span><input type="text" :value="credential"@input="emits('update:credential', (<HTMLInputElement>$event.target).value)" /></div>
</template><script setup lang="ts">
defineProps(['account', 'credential'])
const emits = defineEmits(['update:account', 'update:credential'])
</script><style scoped lang="scss">
.content {background-color: greenyellow;padding: 20px;input {border: 3px solid red;height: 30px;line-height: 30px;margin-right: 20px;width: 300px;}
}
</style>

9> 浏览器刷新访问:http://localhost:5173/,页面初始化时 <input> 框内显示来自父组件的数据 administrator00000000,每次修改 <input> 框中数据,控制台便会打印出数据变化日志,此日志为 App.vue 打印的,表明父组件也收到了子组件传来的修改后的变更数据。
在这里插入图片描述

总结

  • 使用 v-model 实现组件间通信的方法常用于封装自定义 UI 组件库,在日常业务开发过程中较少使用;
  • 使用 v-model 实现组件间通信的底层原理是:动态 value + input 事件
  • 父组件需要在子组件标签上通过 v-model 属性标识所传的数据;
  • 子组件需要使用 defineProps 函数声明接收父组件的数据,使用 defineEmits 函数声明接收父组件数据对应的事件;
  • v-model 默认传的数据名为 modelValue,对应事件名为 update:modelValue。数据名可自定义,格式:v-model:自定义数据名;事件名前缀固定为 update:,格式:update:自定义数据名

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

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

相关文章

LDR6020快充线,科技与便捷的新宠

在快节奏的现代生活中&#xff0c;充电效率成为了我们不可忽视的一个重要因素。随着智能手机、平板电脑等电子设备的普及&#xff0c;快充线以其独特的优势逐渐成为充电设备市场的新宠。 快充线&#xff0c;相比于传统的普通充电线&#xff0c;快充线在充电速度上有着显著的提升…

五、一个quad同时支持pcie和sfp两种高速接口的ref时钟配置

项目描述 上位机将截图数据通过 XDMA 写入到 FPGA 侧的 DDR 内存区域 1 中通过 axi_lite 接口给 axi_read_start 信号&#xff0c;通知 AXI_read 模块启动读取数据&#xff0c;然后通过 GTP TX 模块发送出去。经过光纤回环&#xff0c;GTP RX 端接收到数据&#xff0c;送给 AX…

微分方程的数值解法——Runge-Kutta (RK4)

Runge-Kutta (RK4)   The Runge-Kutta (RK4) methods are used to solve the solution of the non-liner ordinary differential equation. Here, we will simply summary this method.   Assume the Intial Value Piont (IVP) is satisfied: y ′ f ( t , y ) , y ( t 0 )…

python-查找元素3(赛氪OJ)

[题目描述] 有n个不同的数&#xff0c;从小到大排成一列。现在告诉你其中的一个数x&#xff0c;x不一定是原先数列中的数。你需要输出最后一个<x的数在此数组中的下标。输入&#xff1a; 输入共两行第一行为两个整数n、x。第二行为n个整数&#xff0c;代表a[i]。输出&#x…

椭圆曲线加法运算

1. 定义 椭圆曲线 (Elliptic Curve) 不是函数&#xff0c;而是一条平面曲线&#xff0c;其方程是定义如下&#xff1a; y 2 x 3 a x b y^2x^3axb y2x3axb 其中&#xff0c;判别式 Δ − 16 ( 4 a 3 27 b 2 ) ≠ 0 \Delta -16(4a^327b^2)\neq 0 Δ−16(4a327b2)0。判别…

Java 并发编程:一文了解 synchronized 的使用

大家好&#xff0c;我是栗筝i&#xff0c;这篇文章是我的 “栗筝i 的 Java 技术栈” 专栏的第 027 篇文章&#xff0c;在 “栗筝i 的 Java 技术栈” 这个专栏中我会持续为大家更新 Java 技术相关全套技术栈内容。专栏的主要目标是已经有一定 Java 开发经验&#xff0c;并希望进…

keil编译报错error:#8:missing closing quote 处理

MDK5采用UTF-8&#xff0c;提示很多个这样的error:#8&#xff1a;missing closing quote 的错误信息。提供以下几种方式解决&#xff1a; 在KEIL中Options for Target Flash -> C/C -> Misc Controls添加“--localeenglish”。

49 序列解包的多种形式和用法

序列解包&#xff08;Sequence Unpacking&#xff09;是 Python 中非常重要和常用的一个功能&#xff0c;可以使用非常简洁的形式完成复杂的功能&#xff0c;提高了代码的可读性&#xff0c;减少了程序员的代码输入量。 x, y, z 1, 2, 3 # 多个变量同时赋值 v_tuple (False…

【课程系列07】某乎AI大模型全栈工程师-第7期

网盘链接 链接&#xff1a;百度网盘 请输入提取码 --来自百度网盘超级会员v6的分享 课程目标 学习完毕咱们可以收获什么种能力&#xff1a; 1、传统前端 后端 数据分析 产品 绘图 算法工程等工作&#xff0c;一个人都可以实现&#xff0c;实现超级个体的能力 2、可以解决…

【C语言】Top K问题【建小堆】

前言 TopK问题&#xff1a;从n个数中&#xff0c;找出最大&#xff08;或最小&#xff09;的前k个数。 在我们生活中&#xff0c;经常会遇到TopK问题 比如外卖的必吃榜&#xff1b;成单的前K名&#xff1b;各种数据的最值筛选 问题分析 显然想开出40G的空间是不现实的&#…

基于STM32的温湿度监控系统

目录 引言环境准备工作 硬件准备软件安装与配置系统设计 系统架构硬件连接代码实现 初始化代码主循环代码应用场景 家居环境监控工业环境监控常见问题及解决方案 常见问题解决方案结论 1. 引言 在智能家居和工业自动化中&#xff0c;温湿度监控系统是一个非常重要的组成部分…

Java企业微信服务商代开发获取AccessToken示例

这里主要针对的是企业微信服务商代开发模式 文档地址 可以看到里面大致有三种token&#xff0c;一个是服务商的token&#xff0c;一个是企业授权token&#xff0c;还有一个是应用的token 这里面主要有下面几个参数 首先是服务商的 corpid 和 provider_secret &#xff0c;这个可…

使用GCC编译Notepad++的插件

Notepad的本体1是支持使用MSVC和GCC编译的2&#xff0c;但是Notepad插件的官方文档3里却只给出了MSVC的编译指南4。 网上也没有找到相关的讨论&#xff0c;所以我尝试在 Windows 上使用 MinGW&#xff0c;基于 GCC-8.1.0 的 posix-sjlj 线程版本5&#xff0c;研究一下怎么编译…

快手商业化 Java后端 二面|面试官很nice

面试总结&#xff1a;没有那种纯八股问题&#xff0c;都是偏向于情景题。看到面试官最后出了一道多叉树的题目&#xff0c;我以为是想直接刷人&#xff0c;但还是尽力去尝试了一下&#xff0c;最后也没做出来&#xff0c;面试官很nice&#xff0c;在答不上来的时候会引导我去思…

JVM—垃圾收集算法和HotSpot算法实现细节

参考资料&#xff1a;深入理解Java虚拟机&#xff1a;JVM高级特性与最佳实践&#xff08;第3版&#xff09;周志明 1、分代回收策略 分代的垃圾回收策略&#xff0c;是基于这样一个事实&#xff1a;不同的对象的生命周期是不一样的。因此&#xff0c;不同生命周期的对象可以采取…

python实现小游戏——植物大战僵尸(魔改版本)

制作一款DIY的‘植物大战僵尸’游戏引起了很多人的兴趣。在这里&#xff0c;我将分享一个使用Python语言在PyCharm环境中开发的初始状态版本。这个版本主要应用了pygame库来完成&#xff0c;是一个充满创意和趣味的魔改版本。 文章目录 前言一、开发环境准备二、代码1.main方法…

Linux小组件:gcc

gcc 是C语言的编译器&#xff0c;在Linux下我们也用这个编译C语言 安装gcc sudo apt install build-essential 查看gcc版本信息 gcc --version 有时候会出现代码编译不过去的问题&#xff0c;通常可能是gcc的编译标准太低&#xff0c;不支持某些写法 比如在很多旧的编译标…

SQL注入实例(sqli-labs/less-4)

0、初始页面 1、确定闭合符号 前两条判断是否为数值型注入&#xff0c;后两条判断字符型注入的闭合符号 ?id1 and 11 ?id1 and 12 ?id1" ?id1") 2、确定表的列数 ?id1") order by 3 -- 3、确定回显位置 ?id-1") union select 1,2,3 -- 4、爆库…

【kali靶机之serial】--反序列化漏洞实操

kali靶机配置 【我图片里没有截图的默认配置即可】需要改的地方图片里面都有。 使用kali扫描网关的主机。 扫到一个开放了80端口HTTP协议的主机ip 访问80端口 会看到一个文本页面&#xff0c;翻译一下看是什么意思。。 F12查看cookie&#xff0c;是一个base64编码了的东西 使…

新手小白学习PCB设计,立创EDA专业版

本教程有b站某UP主的视频观后感 视频链接&#xff1a;http://【【教程】零基础入门PCB设计-国一学长带你学立创EDA专业版 全程保姆级教学 中文字幕&#xff08;持续更新中&#xff09;】https://www.bilibili.com/video/BV1At421h7Ui?vd_sourcefedb10d2d09f5750366f83c1e0d4a…