vue父子组件传值(v-model)

父组件使用v-model传值给子组件

<template><!-- 按钮 -->
<el-button @click="addMenu('new')">打开弹框</el-button><!-- 自定义组件,下面这两种写法都可以👇 -->
<MediaDialog :name="name" v-model:visible="dialogMediaVisible" /></template><script lang="ts">
import { defineComponent, ref } from 'vue'export default defineComponent({name: 'MediaCenter',setup() {const dialogMediaVisible: Ref = ref(false)const name = '🚌🚌🚌🚌🚌🚌🚌🚌🚌父组件传递的name🚌🚌🚌🚌🚌🚌🚌🚌🚌'const addMenu = function(status) {dialogMediaVisible.value = true}return {name,dialogMediaVisible,}}
})
</script>

子组件

子组件使用 props 接收父组件传来的值

<template><div><!--⚠️注意这里有个大坑,一定要用 model-value,不能用v-model --><el-dialogclass="mediaDialog"title="我是一个弹框":model-value="visible":before-close="handleClose"><span>{{ name }}</span><template #footer><span class="dialog-footer"><el-button @click="handleClose">取 消</el-button><el-button type="primary" @click="handleClose">确 定</el-button></span></template></el-dialog></div>
</template><script lang="ts">
import { defineComponent, ref, provide } from 'vue'export default defineComponent({name: 'mediaDialog',props: {name: String,visible: Boolean},setup(props, context) {// 使用 context.emit('update:visible', false),改变父组件visible的值const handleClose = function() {context.emit('update:visible', false)}return { handleClose }}
})
</script>

注意

1)这里有个大坑,<el-dialog> 中一定要用 model-value 来代替 v-model,不能用v-model,否则会报错
(2)子组件中修改父组件传入的参数 visible 时,使用 👇方式

context.emit('update:参数名', 改变的值)

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

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

相关文章

『SEQ日志』在 .NET中快速集成轻量级的分布式日志平台

&#x1f4e3;读完这篇文章里你能收获到 如何在Docker中部署 SEQ&#xff1a;介绍了如何创建和运行 SEQ 容器&#xff0c;给出了详细的执行操作如何使用 NLog 接入 .NET Core 应用程序的日志&#xff1a;详细介绍了 NLog 和 NLog.Seq 来配置和记录日志的步骤日志记录示例&…

UE4/5Niagara粒子特效之Niagara_Particles官方案例:3.3->4.3

目录 3.3 Visibility Tag 左边的发射器&#xff1a; 发射器更新 粒子生成 粒子更新 右边的发射器 和左边发射器不同的地方 3.4 Texture Sampling 发射器更新 粒子生成 粒子更新 4.1Play Audio Per Particle 系统 第三个发射器 发射器更新 粒子生成 粒子更新 第二个…

1268. 搜索推荐系统

链接&#xff1a; 1268. 搜索推荐系统 题解&#xff1a; class Solution { public: struct Trie {Trie() {end false;next.resize(26, nullptr);}bool end;std::set<std::string> words;std::vector<Trie*> next; };void insert_trie(const std::string& w…

Android相机-HAL子系统

引言 应用框架要通过拍照预览摄像获得照片或者视频,就需要向相机子系统发出请求, 一个请求对应一组结果 一次可发起多个请求&#xff0c;并且提交请求是非阻塞的&#xff0c;始终按照接收的顺序以队列的形式先进先出地进行顺序处理 一个请求包含了拍摄和拍照配置的所有信息&…

【音视频处理】转编码H264 to H265,FFmpeg,代码分享讲解

大家好&#xff0c;欢迎来到停止重构的频道。 本期我们讨论音视频文件转编码&#xff0c;如将视频H264转H265等。 内容中所提及的代码都会放在GitHub&#xff0c;感兴趣的小伙伴可以到GitHub下载。 我们按这样的顺序展开讨论&#xff1a;​ 1、 编码的作用 2、 转编码的…

avue-ueditor中隐藏部分工具栏

项目中不需要那么多工具栏,只需要展示部分工具栏 <avue-ueditor v-model"content" v-bind"options" :customConfig"customConfig" :placeholder"placeholder"></avue-ueditor>//按需隐藏或者显示工具栏即可 props: {custo…

C语言基础之——操作符(上)

本篇文章&#xff0c;我们将展开讲解C语言中的各种常用操作符&#xff0c;帮助大家更容易的解决一些运算类问题。 这里提醒一下小伙伴们&#xff0c;本章知识会大量涉及到二进制序列&#xff0c;不清楚二进制序列的小伙伴&#xff0c;可以去阅读我的另一篇文章《数据在内存中的…

6、Spring_Junit与JdbcTemplate整合

Spring 整合 1.Spring 整合 Junit 1.1新建项目结构 1.2导入依赖 导入 junit 与 Spring 依赖 <!-- 添加 spring 依赖--> <dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version…

MySQL 8.0 多实例的配置应用

文章目录 同版本多实例配置部署、启动、连接 不同版本多实例配置初始化initialize-insecure 含义 启动 同版本多实例 配置 mkdir -p /data/330{7..9}/data chown -R mysql.mysql /data/* cat > /data/3307/my.cnf <<EOF [mysqld] usermysql basedir/usr/local/mysql …

Skywalking Kafka Tracing实现

背景 Skywalking默认场景下&#xff0c;Tracing对于消息队列的发送场景&#xff0c;无法将TraceId传递到下游消费者&#xff0c;但对于微服务场景下&#xff0c;是有大量消息队列的业务场景的&#xff0c;这显然无法满足业务预期。 解决方案 Skywalking的官方社区中&#xf…

深度学习入门(三):卷积神经网络(CNN)

引入 给定一张图片&#xff0c;计算机需要模型判断图里的东西是什么&#xff1f; &#xff08;car、truck、airplane、ship、horse&#xff09; 一、卷积神经网络整体架构 CONV&#xff1a;卷积计算层&#xff0c;线性乘积求和RELU&#xff1a;激励层&#xff0c;激活函数P…

Flutter性能揭秘之RepaintBoundary

作者&#xff1a;xuyisheng Flutter会在屏幕上绘制Widget。如果一个Widget的内容需要更新&#xff0c;那就只能重绘了。尽管如此&#xff0c;Flutter同样会重新绘制一些Widget&#xff0c;而这些Widget的内容仍有部分未被改变。这可能会影响应用程序的执行性能&#xff0c;有时…

Flume、Logstash、Filebeat对比

Flume、Logstash和Filebeat是三种常用的数据采集工具,用于收集、聚合和传输日志和事件数据。它们在功能、特性和适用场景上有一些区别。以下是对它们的简要对比: Apache Flume: 用途:主要用于大规模数据采集、传输和聚合,特别适用于将数据送入Hadoop生态系统。特点: 提供…

springboot集成Graphql相关问题汇总

1、idea在debug运行时出现java.lang.NoClassDefFoundError:kotlin/collections/AbstractMutableMap 解决&#xff1a;禁用idea dubugger中kotlin coroutine agent 见&#xff1a;https://stackoverflow.com/questions/70796177/after-the-spring-boot-source-code-is-compile…

Mongodb 删除文档Delete与Remove的区别

db.collection.remove() 此方法已被 mongosh 弃用 已弃用的方法替代方法db.collection.remove()db.collection.deleteOne() db.collection.deleteMany() db.collection.findOneAndDelete() db.collection.bulkWrite() 5.0版本更改。 db.collection.remove(<query>,…

Android studio之 build.gradle配置

在使用Android studio创建项目会出现两个build.gradle&#xff1a; 一. Project项目级别的build.gradle &#xff08;1&#xff09;、buildscript{}闭包里是gradle脚本执行所需依赖&#xff0c;分别是对应的maven库和插件。 闭包下包含&#xff1a; 1、repositories闭包 2、d…

16、Flink 的table api与sql之连接外部系统: 读写外部系统的连接器和格式以及JDBC示例(4)

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…

git 查看某个分支是从哪个分支拉出来的

原文链接&#xff1a;https://blog.csdn.net/allanGold/article/details/102478157 git reflog show 分支名git reflog --datelocal | grep 分支名git reflog --datelocal | grep 分支名 $ git reflog --datelocal | grep release3 5c50761 HEAD{Thu Jun 29 12:53:45 2023}: c…

3D旅游情景实训教学展示

随着科技的不断发展&#xff0c;情景实训教学在教育领域中的应用越来越广泛。通过虚拟现实技术&#xff0c;3D视觉技术&#xff0c;计算机技术等为学生提供了一个身临其境的学习环境&#xff0c;让他们能够在模拟的场景中学习和实践&#xff0c;从而更好地理解和掌握知识。 3D虚…

Docker搭建LNMP运行Wordpress平台

一、项目1.1 项目环境1.2 服务器环境1.3 任务需求 二、Linux 系统基础镜像三、Nginx1、建立工作目录2、编写 Dockerfile 脚本3、准备 nginx.conf 配置文件4、生成镜像5、创建自定义网络6、启动镜像容器7、验证 nginx 四、Mysql1、建立工作目录2、编写 Dockerfile3、准备 my.cnf…