记录使用 Vue3 过程中的一些技术点

1、自定义组件,并使用 v-model 进行数据双向绑定。

简述: 自定义组件使用 v-model 进行传参时,遵循 Vue 3 的 v-model 机制。在 Vue 3 中,v-model 默认使用了 modelValue 作为 prop 名称,以及 update:modelValue 作为事件名称。

例子:
首先,我们创建一个自定义组件 MyInput.vue,该组件使用 <script setup> 语法,并允许通过 v-model 绑定值:

<!-- MyInput.vue -->  
<template>  <input :value="modelValue" @input="updateValue" />  
</template>  <script setup>  
import { defineProps, defineEmits, ref } from 'vue';  const props = defineProps({  modelValue: String  
});  const emit = defineEmits(['update:modelValue']);  const updateValue = (event) => {  emit('update:modelValue', event.target.value);  
};  
</script>

在这个例子中,使用了 defineProps 来定义 modelValue prop,它对应于 v-model 绑定的值。同时,我们使用 defineEmits 来声明 update:modelValue 事件,该事件将在输入框的值变化时被触发。

接下来,在父组件中使用这个自定义组件,并通过 v-model 绑定一个数据属性:

<!-- ParentComponent.vue -->  
<template>  <div>  <p>Value in Parent: {{ inputValue }}</p>  <MyInput v-model="inputValue" />  </div>  
</template>  <script setup>  
import { ref } from 'vue';  
import MyInput from './MyInput.vue';  const inputValue = ref('');  
</script>

在父组件中,导入了自定义的 MyInput 组件,并使用 v-modelinputValue 绑定到该组件的 modelValue prop 上。当 MyInput 组件中的输入框值变化时,它会触发 update:modelValue 事件,进而更新父组件中的 inputValue

注意,在 <script setup> 中,不需要显式地返回任何东西给模板,因为所有的响应式状态(通过 refreactive 创建)和函数都会自动暴露给模板。这使得代码更加简洁和直观。

2、异步加载动态组件
  ├─ src              │  ├─ components              │  │  ├─ ChartA.vue         │  │  ├─ ChartB.vue        │  │  └─ ChartC.vue       │  └─ test-async.vue └─ package.json                       
异步加载组件

方式一:


<template><AsyncOne />
</template><script setup>
import { defineAsyncComponent } from "vue";const AsyncOne = defineAsyncComponent(() =>import("@/components/ChartA.vue")
);
</script>

方法二:vue3+vite5 中


<template><AsyncTwo/>
</template><script setup>
import { defineAsyncComponent, ref } from "vue";const AsyncTwo = ref(null);
AsyncTwo.value = registerComponent("/ChartC");// 使用异步组件的方式加载组件
const registerComponent = (componentPath) => {const modules = import.meta.glob("./components/**/*.{vue,tsx}");for (const item in modules) {if (item.includes(componentPath)) {return defineAsyncComponent(modules[item]);}}
};
</script>
异步加载动态组件
<template><div v-for="(item, index) in componentsInfo" :key="index"><component :is="item.loadComp" /></div>
</template><script setup>
import { defineAsyncComponent, onMounted, ref } from "vue";const componentsInfo = ref([{id: "1-1",title: "图表A",component: "/ChartA",},{id: "1-2",title: "图表B",component: "/ChartB",},{id: "1-3",title: "图表C",component: "/ChartC",},
]);onMounted(() => {processLoad(componentsInfo.value);
});const processLoad = (info) => {for (let i = 0; i < info.length; i++) {let item = info[i];if (!item.component) {continue;}let resComp = registerComponent(item.component);item.loadComp = resComp;}
};// 注册一个异步组件
const registerComponent = (componentPath) => {//获取 src/components 文件夹下所有组件const modules = import.meta.glob("./components/**/*.{vue,tsx}"); for (const item in modules) {if (item.includes(componentPath)) {return defineAsyncComponent(modules[item]);}}
};
</script>

效果:
在这里插入图片描述

3、

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

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

相关文章

【十一】图解SpringBoot AOP实现原理

图解Spring AOP实现原理 概述 研究了一段时间spring原理&#xff0c;对spring的ioc和aop有了更深刻的理解&#xff0c;最大的体会就是spring的核心就是ioc和aop&#xff0c;spring的功能都是基于这两大特性延展开的&#xff0c;spring ioc管理了Java bean&#xff0c;spring ao…

怎么把3d模型旋转加复制---模大狮

在进行3D建模和设计过程中&#xff0c;经常需要对3D模型进行旋转和复制操作&#xff0c;这是设计过程中的常见需求。本文将介绍如何对3D模型进行旋转和复制&#xff0c;帮助读者更好地掌握这一重要的操作技巧。 一、旋转3D模型 在大多数3D建模软件中&#xff0c;旋转3D模型通常…

dp + 计数,1954D - Colored Balls

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 1954D - Codeforces 二、解题报告 1、思路分析 本题前置题目&#xff1a; 1953. 你可以工作的最大周数 通过前置题目可以知道如何计算两两不同数对序列的最大长度 我们记最大数量为ma&#xf…

大模型时代的具身智能系列专题(三)

清华高阳团队 高阳为清华叉院助理教授&#xff0c;本科毕业于清华大学计算机系&#xff0c;博士毕业于UC Berkeley。博士导师是Vision领域的大牛Trevor Darrell&#xff0c;读博期间和Sergey Levine合作开始强化学习方面的探索&#xff0c;博后跟随Pieter Abbeel做强化学习&am…

Vue的学习 —— <Echarts组件库技术应用>

目录 前言 正文 一、ECharts技术简介 二、Vue3集成Echarts 1、安装Echarts 2、引入方式 三、Echarts基础篇 1、图表容器及大小 2、样式 2.1 颜色主题 3、坐标轴 5、数据集 5.1 在series中设置数据集 5.2 在dataset中设置数据集 四、常用图表实操 1、柱状图 2、…

常见API(JDK7时间、JDK8时间、包装类、综合练习)

一、JDK7时间——Date 1、事件相关知识点 2、Date时间类 Data类是一个JDK写好的Javabean类&#xff0c;用来描述时间&#xff0c;精确到毫秒。 利用空参构造创建的对象&#xff0c;默认表示系统当前时间。 利用有参构造创建的对象&#xff0c;表示指定的时间。 练习——时间计…

刷题记录5.22-5.27

文章目录 刷题记录5.22-5.2717.电话号码的字母组合78.子集131.分割回文串77.组合22.括号生成198.打家劫舍---从递归到记忆化搜索再到递推动态规划背包搜索模板494.目标和322.零钱兑换牛客小白月赛---数字合并线性DP1143.最长公共子序列72.编辑距离300.最长递增子序列状态机DP12…

ssh远程连接的相关配置

连接同一个局域网下&#xff1a; 正好这里来理解一下计算机网络配置中的ip地址配置细节&#xff0c; inet 172.20.10.13: 这是主机的IP地址&#xff0c;用于在网络中唯一标识一台设备。在这个例子中&#xff0c;IP地址是172.20.10.13。 netmask 255.255.255.240: 这是子网掩码…

【LeetCode】力扣第 399 场周赛 优质数对的总数 II

文章目录 1. 优质数对的总数 II 1. 优质数对的总数 II 题目链接 &#x1f34e;该题涉及的小技巧&#xff1a;&#x1f425; &#x1f427;①一次可以统计这个数的 两个因子 但是要注意 25 5 * 5&#xff0c;这种情况 5 只能统计一次噢&#x1f192; 解题思路: &#x1f427…

声学特征在膝关节健康诊断中的应用分析

关键词&#xff1a;膝关节声发射、膝关节生物标志物、因果关系、机器学习 声学膝关节健康评估长期以来一直被看作是一种替代临床可用医学成像工具的替代方法&#xff0c;如声发射技术是通过检测膝关节在运动过程中产生的微小裂纹或损伤引起的声波信号&#xff0c;从而评估关节的…

Scrum 的速度如何衡量和提高

了解你的 Scrum 团队的实际开发速度是非常多敏捷团队的诉求&#xff0c;而速度&#xff08;Velocity&#xff09;作为敏捷项目的度量工具&#xff0c;为管理者提供了对团队工作能力深入了解的机会。 这份指南将深入探讨 Scrum 中速度的概念&#xff0c;指导你如何进行计算&…

GTX IP生成及参数详解(高速收发器九)

如下图所示&#xff0c;在IP Catalog中搜索gt&#xff0c;然后双击7 Series FPGAs Transcelvers Wizard打开IP配置界面。 图1 打开7 Series FPGAs Transcelvers Wizard IP 1、配置GT Selection界面 首先进入GT Selection配置界面&#xff0c;这个界面主要关注红框部分。从前文对…

BioTech - 输入 自定义复合物(Multimer)模版 使用 AlphaFold2 进行精细预测

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://blog.csdn.net/caroline_wendy/article/details/139234247 参考:研发 AlphaFold2 输入自定义模版 (Template) 的接口 在 AlphaFold 预测蛋白质三维结构中,结构 模版(Template) 起着关键作用: 蛋白质结构…

实战 | 使用YoloV8实例分割识别猪的姿态(含数据集)

导 读 本文主要介绍如何使用YoloV8实例分割识别猪的姿态&#xff08;含数据集&#xff09;。 背景介绍 在本文中&#xff0c;我将介绍如何使用YoloV8在猪的自定义数据集上进行实例分割&#xff0c;以识别和跟踪它们的不同姿态。 数据集 使用的数据集来源于Kokkenborg Aps&…

【话题】你眼中的IT行业现状与未来趋势

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读小5的系列文章&#xff0c;这是《话题》系列文章 目录 引言一、IT行业的现状1.1 云计算与大数据1.2 人工智能与机器学习1.3 物联网与5G通信1.4 区块链技术 二、IT行业未来发展趋势2.1 边缘计算与智能设备2.2 深度学习与自然语…

告别繁琐!Xinstall助你轻松实现APP地推结算,提升推广效率

随着移动互联网的迅猛发展&#xff0c;APP市场竞争日益激烈。面对线上推广转化率下降、成本上升的挑战&#xff0c;越来越多的APP厂商开始尝试线下地推这一更为直接、有效的推广方式。然而&#xff0c;地推结算过程中的种种问题却让许多企业头痛不已。今天&#xff0c;我们将为…

亲测使用frp获得访问者真实ip

怎么访问都只有127.0.0.1这个内网ip,获取不到访问者的真实ip 1.打开frp的配置文件(一般是frpc.toml&#xff0c;无需设置frps.toml) 在每一个tcp协议中添加 transport.proxyProtocolVersion "v2" 实例&#xff1a; # frpc.toml [[proxies]] name "web" …

CSS学习笔记:flex布局(弹性布局)

设置flex布局 父元素添加display: flex 使用justify-content调节元素在主轴的对齐方式 给父元素添加justify-content属性&#xff0c;取值如下 用于调节子元素在主轴方向&#xff08;水平方向&#xff09;的对齐方式 使用align-items调节元素在侧轴的对齐方式 给父元素添加…

华为机考入门python3--(31)牛客31-单词倒排

分类&#xff1a;字符串、正则 知识点&#xff1a; 正则提取所有符合的字符串 words re.findall(r[a-zA-Z], sentence) 列表倒序 words[::-1] 题目来自【牛客】 import re # 导入正则表达式模块def reverse_words(sentence):# 使用正则表达式将句子拆分成单词# 如可以将…

GM Bali,OKLink受邀参与Polygon AggIsland大会

5月16日-17日&#xff0c;OKLink 受到生态合作伙伴 Polygon 的特别邀请&#xff0c;来到巴厘岛参与以 AggIsland 为主题的大会活动并发表演讲&#xff0c;详细介绍 OKLink 为 Polygon 所带来的包括多个浏览器和数据解析等方面的成果&#xff0c;并与 Polygon 一起&#xff0c;对…