vue3 二次封装uni-ui中的组件,并且组件中有 v-model 的解决方法

news2025/3/13 23:47:32

在使用uniapp+vue3开发中, 使用了uni-ui的组件,但是我们也需要自定义组件,比如我要自定一个picker 的组件, 是在 uni-data-picker 组件的基础上进行封装的
父组件中的代码

<classesselect :selectclass="selectclass" :classinfotree="classinfotree"></classesselect>
<script setup>
import classesselect from "./components/classesselect.vue"

//班级选项数据
const classinfotree = ref([{
	text:"摩尔英语1班",
	value:1
},{
	text:"摩尔英语2班",
	value:2
},{
	text:"摩尔英语3班",
	value:3
}]);

//父组件中记录选中的数据	
const selectclass = ref(3)

</script>

如下图:子组件的名称是 classesselect ,代码如下

<template>
	<view class="comwrapper">
		<view class="typesel">
			<view class="underline">
				<uni-data-picker 
					:clear-icon="false" 
					:localdata="classinfotree"    //这里接收你组件传来的 选项数据
					v-model="classselect"	//这里是选中的数据  **********这里其实就是用错误的了 错误 错误 错误*********
				></uni-data-picker>
			</view>
		</view>
	</view>
</template>
<script setup>
//班级选择器	
import { ref } from "vue"
	
const props = defineProps(["classinfotree","selectclass"])
</script>

上面的代码就已经出现错误了, 更别说运行了, 因为 子组件的v-model ,直接在子组件中改变了 父组件传来的值 ,这在vue3中是不被允许的

解决办法:我们来先看一下,官网对 v-model的解释
在这里插入图片描述
可以看到, 问题就在 @update:model-value=''newValue => searchText = newValue ",这个代码中,它就相当于在子组件中, 修改了父组件的代码

所以, 我们对 子组件的 v-model 进行还原,并且 改写 update:model-value 的方法就可以了

下面是解决之后的代码
首选, 我们把子组件中的 v-model 的代码还原

同时子组件中实现方法

function handleModelValue (val) {
    emits('update:modelValue', val)  //触发父组件中的方法, 并把新的子组件中的值传送到父组件中
}

————————————
然后是父组件中的代码
在这里插入图片描述

在这里插入图片描述
通过以上的改写, 就可以正常的封装 uniui中 带有 v-model 的组件了

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

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

相关文章

探索高性能AI识别和边缘计算 | NVIDIA Jetson Orin Nano 8GB 开发套件的全面测评

随着边缘计算和人工智能技术的迅速发展&#xff0c;性能强大的嵌入式AI开发板成为开发者和企业关注的焦点。NVIDIA近期推出的Jetson Orin Nano 8GB开发套件&#xff0c;凭借其40 TOPS算力、高效的Ampere架构GPU以及出色的边缘AI能力&#xff0c;引起了广泛关注。本文将从配置性…

【学习笔记】《逆向工程核心原理》03.abex‘crackme-2、函数的调用约定、视频讲座-Tut.ReverseMe1

文章目录 abexcrackme-21. Visual Basic文件的特征1.1. VB专用引擎1.2. 本地代码与伪代码1.3. 事件处理程序1.4. 未文档化的结构体 2. 开始调试2.1. 间接调用2.2. RT_MainStruct结构体2.3. ThunRTMain()函数 3. 分析crackme3.1. 检索字符串3.2. 查找字符串地址3.3. 生成Serial的…

React基础之项目实战

规范的项目结构 安装scss npm install sass -D 安装Ant Design组件库 内置了一些常用的组件 npm install antd --save 路由基础配置 npm i react-router-dom 路由基本入口 import Layout from "../page/Layout"; import Login from "../page/Login"; impor…

SAP-ABAP:SAP数据库视图的创建图文详解

在SAP ABAP中&#xff0c;数据库视图&#xff08;Database View&#xff09;是通过ABAP字典&#xff08;ABAP Dictionary&#xff09;创建的。数据库视图是基于一个或多个数据库表的虚拟表&#xff0c;它允许你定义一种逻辑视图来访问数据。以下是创建数据库视图的步骤&#xf…

基于深度学习的肺炎X光影像自动诊断系统实现,真实操作案例分享,值得学习!

医疗影像智能化的技术演进 医学影像分析正经历从人工判读到AI辅助诊断的革命性转变。传统放射科医师分析胸部X光片需要8-12年专业训练&#xff0c;而基于深度学习的智能系统可在秒级完成检测。本文将以肺炎X光检测为切入点&#xff0c;详解从数据预处理到模型部署的全流程实现。…

Unity Shader学习总结

1.帧缓冲区和颜色缓冲区区别 用于存储每帧每个像素颜色信息的缓冲区 帧缓冲区包括&#xff1a;颜色缓冲区 深度缓冲区 模板缓冲区 自定义缓冲区 2.ImageEffectShader是什么 后处理用的shader模版 3.computerShader 独立于渲染管线之外&#xff0c;在显卡上运行&#xff0c;大量…

算法精讲 | 树(番外):平衡世界的四大守护者:AVL vs 红黑树 vs B树 vs B+树

&#x1f332; 算法精讲 | 树&#xff08;番外&#xff09;&#xff1a;平衡世界的四大守护者&#xff1a;AVL vs 红黑树 vs B树 vs B树 &#x1f4c5; 2025/03/12 || &#x1f31f; 推荐阅读时间 30分钟 &#x1f680; 开篇&#xff1a;数据结构界的四大天王 想象你是一名图书…

第十八:go 并发 goroutine

channel 可以让多个goroutine 之间实现通信 Add方法调用时机&#xff1a;必须在goroutine 启动之前调用Add方法来增加计数器的值。 如果在goroutine已经启动之后再调用Add&#xff0c;可能会导致Wait方法提前返回&#xff0c;因为计数器没有正确反映正在运行的goroutine的数量…

在vs中无法用QtDesigner打开ui文件的解决方法

解决方法 右键ui文件&#xff0c;选择打开方式&#xff0c;弹出如下界面。 点击添加&#xff0c;弹出如下界面 点击程序后边的三个点&#xff0c;去电脑查找designer.exe,我的位置为D:\Qt\Qt5.9.9\5.9.9\msvc2015_64\bin\designer.exe。 名称可以自己起一个名字&#xff0c…

图像识别技术与应用-YOLO

1 YOLO-V1 YOLO-V1它是经典的one-stage方法&#xff0c;You Only Look Once&#xff0c;名字就已经说明了一切&#xff01;把检测问题转化成回归问题&#xff0c;一个CNN就搞定了&#xff01;也可以对视频进行实时检测&#xff0c;应用领域非常广&#xff01; YOLO-V1诞生与2…

LLM推理和优化(1):基本概念介绍

一、LLM推理的核心过程&#xff1a;自回归生成 LLM&#xff08;如DeepSeek、ChatGPT、LLaMA系列等&#xff09;的推理本质是自回归生成&#xff1a;从初始输入&#xff08;如[CLS]或用户prompt&#xff09;开始&#xff0c;逐token预测下一个词&#xff0c;直到生成结束符&…

Kubernetes教程(七)了解集群、标签、Pod和Deployment

了解集群、标签、Pod和Deployment 一、K8s资源对象二、K8s集群1. Master2. Node 三、Namespace&#xff08;命名空间&#xff09;四、Label&#xff08;标签&#xff09;五、Pod1. 共享网络命名空间2. 共享数据 六、工作负载1. 设置副本数2. 应用升级 结语 Kubernetes的知识真的…

【最新】DeepSeek 实用集成工具有那些?

deepseek 系列github仓库地址 【主页】deepseek-aiDeepSeek-R1DeepSeek-V3DeepSeek-VL2【本文重点介绍】awesome-deepseek-integration 注意&#xff1a;以下内容来自awesome-deepseek-integration DeepSeek 实用集成&#xff08;awesome-deepseek-integration&#xff09; 将…

Flutter_学习记录_video_player、chewie 播放视频

1. video_player 视频播放 插件地址&#xff1a;https://pub.dev/packages/video_player 添加插件 导入头文件 import package:video_player/video_player.dart;Android配置&#xff08;iOS不用配置&#xff09; 修改这个文件&#xff1a;/android/app/src/main/AndroidMani…

【MySQL】增删改查进阶

目录 一、数据库约束 约束类型 NULL约束&#xff1a;非空约束 UNIQUE&#xff1a;唯一约束 DEFAULT&#xff1a;默认值约束 PRIMARY KEY&#xff1a;主键约束 FOREIGN KEY&#xff1a;外键约束 二、表的设计 三、新增 四、查询 聚合查询 聚合函数 GROUP BY子句 HA…

静态时序分析:SDC约束命令set_ideal_latency详解

相关阅读 静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html?spm1001.2014.3001.5482 当使用set_ideal_network命令将当前设计中的一组端口或引脚标记为理想网络源后&#xff0c;理想属性会沿着组合逻辑进行传播&#xff0c;理想网络中的线网和单元…

达梦数据库查看字符集编码

select SF_GET_UNICODE_FLAG(); 返回 0 代表数据库字符集编码为 GB18030 1 代表数据库字符集编码为 UTF-8 2 代表数据库字符集编码为韩文字符集 EUC-KR

Pac-Man(吃豆人) 游戏

目录 前言 1. Pygame游戏开发基础 1.1 Pygame简介 1.2 游戏开发基本概念 1.3 Pygame核心模块介绍 2. 游戏设计与规划 2.1 游戏规则设计 2.2 游戏对象规划 2.3 技术方案选择 3. 创建游戏窗口与初始化 3.1 初始化Pygame环境 3.2 设置游戏窗口 3.3 定义颜色和游戏参数…

【Spring】@PostConstruct详解

在 Java 开发中&#xff0c;尤其是在基于 Spring 框架的项目里&#xff0c;我们常常会遇到需要在对象创建并完成依赖注入后&#xff0c;执行一些初始化操作的场景。PostConstruct注解正是为解决此类问题而诞生的&#xff0c;它为我们提供了一种便捷且优雅的方式来处理对象的初始…

OEM SQL Details and Session Details 5s 或者parallel 才会在sql monitor显示

从企业管理器 13.4 版本更新 10 (RU10) 开始&#xff0c;ASH Analytics 的 SQL 详细信息和会话详细信息深入屏幕已更新为使用 Oracle JET UI。 在 Ash Analytics 中&#xff0c;单击左下角区域中“热门 SQL”中的 SQL ID 即可深入了解 SQL 详细信息。 单击右下角“热门会话”区…