【vue3】vue3接收props以及emit的用法

技术:vue3.2.40
UI框架:arco-design 2.44.7
css技术:less 4.1.3

实现:子组件接收props以及通过emit方法传值父组件

vue3使用的组合式API,我这里使用的是defineComponent

1.父页面调用子组件

<template><div class="dataManagerMentPage"><a-table :columns="fieldColumns" :data="tableData" :scrollbar="true"><template #category="{ record }">{{ handModelType(record.category) }}</template><template #optional="{ column, record, rowIndex }"><a-button @click="handDetails(column, record, rowIndex)" type="text">详情</a-button></template></a-table><modelDetails:modalForm="modalForm"@handleCancel="handleCancel"@handleModalOk="handleModalOk"></modelDetails></div>
</template><script lang="ts">import {defineComponent,reactive,toRefs,onUnmounted,onMounted,} from 'vue';import modelDetails from './components/modelDetails.vue';export default defineComponent({name: 'DataManagerMent',components: {modelDetails,},setup() {interface IDataManagerMant {// table字段名fieldColumns: any[];// table数据源tableData: any[];modalForm: {visible: boolean;title: string;data: object;};}const dataManagerMant = () => ({modalForm: {visible: false,title: '',data: null,},// table字段名fieldColumns: [{title: '设备ID',dataIndex: 'id',ellipsis: true,tooltip: true,},{title: '设备名称',dataIndex: 'deviceName',ellipsis: true,tooltip: true,},{title: '设备序列号',dataIndex: 'deviceOuterId',ellipsis: true,tooltip: true,},{title: '设备类型',dataIndex: 'category',slotName: 'category',},{title: '厂商',dataIndex: 'manufacturer',ellipsis: true,tooltip: true,},{title: '绑定模型',dataIndex: 'relatedModelId',},{title: '创建时间',dataIndex: 'createDate',},{title: '操作',dataIndex: 'optional',slotName: 'optional',align: 'center',},],// table数据源tableData: [],});const state: IDataManagerMant = reactive(dataManagerMant());// 查看详情页function handDetails(column: any, record: any, rowIndex: any) {state.modalForm = {visible: true,title: record.id,data: record,};}// 判断设备类型function handModelType(category: string) {let name = '';switch (category) {case 'VEHICLE':name = '车辆';break;case 'VIDEO':name = '视频';break;case 'COMMON':name = '默认';break;default:name = '默认';break;}return name;}// 关闭弹窗function handleCancel() {state.modalForm = {visible: false,title: '',data: {},};}// 弹窗保存按钮事件function handleModalOk() {handleCancel();}return {...toRefs(state),handDetails,handleCancel,handleModalOk,handModelType,};},});
</script><style lang="less" scoped>.dataManagerMentPage {width: 100%;height: 100%;margin: 0;padding: 0;}
</style>

2.子组件

<template><a-modalwidth="50%":visible="modalForm.visible"@ok="handleOk"@cancel="handleCancel":title="'数据详情-' + modalForm.title"okText="保存"cancelText="取消"title-align="start":okLoading="loading"><a-spin :loading="loading" tip="正在获取数据中..."><div class="modelDetailsPage"></div></a-spin></a-modal>
</template><script lang="ts">import {defineComponent,reactive,toRefs,onUnmounted,onMounted,watch,} from 'vue';import { Message } from '@arco-design/web-vue';export default defineComponent({name: 'ModelDetails',props: {// 父级的modalForm: {visible: {type: Boolean,default: false,},title: {type: String,default: '',},},},setup(props, { emit }) {interface IDataManagerMant {loading: boolean;}const dataManagerMant = () => ({loading: false,});const state: IDataManagerMant = reactive(dataManagerMant());// 保存按钮事件function handleOk() {state.loading = true;Message.success('保存成功!');emit('handleModalOk');state.loading = false;}// 返回按钮事件function handleCancel() {emit('handleCancel');}watch(() => props.modalForm,(newV, oldV) => {if (newV.visible) {// 这里可以写处理化执行的函数方法=}});return {...toRefs(state),handleOk,handleCancel,};},});
</script>
<style lang="less" scoped>.modelDetailsPage {width: 100%;height: 100%;padding: 0 12px;}
</style>

注意点:

1.setup里如果需要接收props和使用emit,只需要带参数 setup(props, { emit })
2.setup里面只需要带emit(‘handleCancel’),不需要带$$符号,这个符号是vue2的写法
3.watch监听的方法,放在setup里面

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

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

相关文章

FPGA开发:按键消抖

按键是FPGA开发板上的重要交互元件&#xff0c;因为按键的内部的结构设计&#xff0c;在按下和松开按键时&#xff0c;按键会无法避免地产生机械抖动&#xff0c;因此要对按键输入进行特殊处理&#xff0c;否则可能会因为机械抖动产生意外的重复触发。 按键消抖有很多方法&…

C++设计模式之模板方法、策略模式、观察者模式

面向对象设计模式是”好的面向对象设计“&#xff0c;所谓”好的面向对象设计“指的是可以满足”应对变化&#xff0c;提高复用“的设计。 现代软件设计的特征是”需求的频繁变化“。设计模式的要点是”寻求变化点&#xff0c;然后在变化点处应用设计模式&#xff0c;从而更好地…

我的2023上半年总结

Hi~C站的小伙伴们好久不见哇&#xff01;釉色终于回到C站&#xff0c;开始要输出了&#xff01;这一篇文章是我的2023上半年的总结&#xff0c;以此&#xff0c;致敬那段迷茫但又不曾被辜负的时光。 文章目录 总括——你愿意花五分钟时间读读我的文章吗学习——制定目标&#…

【Matlab】基于粒子群优化算法优化BP神经网络的时间序列预测(Excel可直接替换数据)

【Matlab】基于粒子群优化算法优化BP神经网络的时间序列预测&#xff08;Excel可直接替换数据&#xff09; 1.模型原理2.数学公式3.文件结构4.Excel数据5.分块代码5.1 fun.m5.2 main.m 6.完整代码6.1 fun.m6.2 main.m 7.运行结果 1.模型原理 基于粒子群优化算法&#xff08;Pa…

nsq整体架构及各个部件作用详解

文章目录 前言 nsq的整体架构图 部件&#xff1a;nsqd 部件&#xff1a;nsqlookupd 部件&#xff1a;nsq连接库 部件&#xff1a;nsqadmin 前言 上两篇博客 centos环境搭建nsq单点_YZF_Kevin的博客-CSDN博客 linux环境搭建nsq集群_YZF_Kevin的博客-CSDN博客 我们讲了nsq是…

桥梁安全监测系统中数据采集上传用 什么?

背景 2023年7月6日凌晨时分&#xff0c;G5012恩广高速达万段230公里加80米处6号大桥部分桥面发生垮塌&#xff0c;导致造成2车受损后自燃&#xff0c;3人受轻伤。目前&#xff0c;四川省公安厅交通警察总队高速公路五支队十四大队民警已对现场进行双向管制。 作为世界第一桥梁…

Hadoop 之 Spark 配置与使用(五)

Hadoop 之 Spark 配置与使用 一.Spark 配置1.Spark 下载2.单机测试环境配置3.集群配置 二.Java 访问 Spark1.Pom 依赖2.测试代码1.计算 π 三.Spark 配置 Hadoop1.配置 Hadoop2.测试代码1.统计字符数 一.Spark 配置 环境说明环境版本AnolisAnolis OS release 8.6Jdkjava versi…

差速驱动机器人的车轮里程计模型

一、说明 车轮测程法是指使用旋转编码器(即连接到车轮电机以测量旋转的传感器)的测程法(即估计运动和位置)。这是轮式机器人和自动驾驶汽车定位的有用技术。 在本文中,我们将通过探索差速驱动机器人的车轮里程计模型来深入研究车轮里

mac使用mvn下载node-sass 会Binary download failed, trying source

m1 上使用nvm 以下node的版本可以直接下载&#xff08;Binary download&#xff0c;而不是 trying source&#xff09;而不用切换mac cpu架构 zhiwenwenzhiwenwendeMBP cockpit % nvm install 14.15.5 Downloading and installing node v14.15.5... Downloading https://node…

Windows环境下git客户端中的git-bash和MinGW64

我们在 Windows10 操作系统下&#xff0c;安装了 git 客户端之后&#xff0c;可以通过 git-bash.exe 打开一个 shell&#xff1a; 执行一些 linux 系统里的命令&#xff1a; 注意到上图紫色的 MINGW64. Mingw-w64 是原始 mingw.org 项目的改进版&#xff0c;旨在支持 Window…

SpringCloud学习路线(12)——分布式搜索ElasticSeach数据聚合、自动补全、数据同步

一、数据聚合 聚合&#xff08;aggregations&#xff09;&#xff1a; 实现对文档数据的统计、分析、运算。 &#xff08;一&#xff09;聚合的常见种类 桶&#xff08;Bucket&#xff09;聚合&#xff1a; 用来做文档分组。 TermAggregation&#xff1a; 按照文档字段值分组…

Shell脚本运算-双小括号(())

示例1&#xff1a;进行简单的数值计算&#xff1a; [rootvm1 scripts]# ((i5)) [rootvm1 scripts]# ((ii**2)) [rootvm1 scripts]# echo $i 25[rootvm1 scripts]# echo 6-3 6-3 [rootvm1 scripts]# echo $((6-3)) 3说明&#xff1a; 如果需要输出&#xff0c;就要加$符号。 示…

【SA8295P 源码分析】51 - QNX + Android NFS 完整配置

【SA8295P 源码分析】51 - QNX + Android NFS 完整配置 一、QNX 侧 NFS Server 修改:ip 为 192.168.118.21.1 配置拷贝 nfsd、rpcbind 到 /mnt 目录下1.2 配置 exports1.3 修 startup.sh 开机自启动 nfsd Server二、Android 侧 NFS Client 修改:ip 为 192.168.118.12.1 修改 …

Flutter Windows通过嵌入Native窗口实现渲染视频

Flutter视频渲染系列 第一章 Android使用Texture渲染视频 第二章 Windows使用Texture渲染视频 第三章 Linux使用Texture渲染视频 第四章 全平台FFICustomPainter渲染视频 第五章 Windows使用Native窗口渲染视频&#xff08;本章&#xff09; 文章目录 Flutter视频渲染系列前言…

文心一言大模型测评

访问地址 文心一言服务请求地址&#xff1a;文心千帆大模型 (baidu.com) 新手可以先实名认证后再申请使用 测评 普通对话 这里先和他进行简单的问题讨论 编程相关 询问他有关代码的内容 确实可以生成代码&#xff0c;但不像chatgpt那样提供复制按钮 我们接下来让他生成…

3基本数据类型

文章目录 3.1. Java 中的几种基本数据类型是什么&#xff1f;对应的包装类型是什么&#xff1f;各自占用多少字节呢&#xff1f;3.2. 自动装箱与拆箱3.3. 八种基本类型的包装类和常量池 3.1. Java 中的几种基本数据类型是什么&#xff1f;对应的包装类型是什么&#xff1f;各自…

LeetCode45.Jump-Game-II<跳跃游戏II>

题目&#xff1a; 思路&#xff1a; 从上次大神那里获得的灵感 这题问的是次数,那么我们需要确保 1,能否跳到终点 2,得到次数. 第一次条获得的是nums[0],那么第一个数就是我们第一次能跳跃的范围.每次在范围里获得最大值.并且次数加一.然后进入下一次范围;即可得到次数; 代码…

明晚直播:可重构计算芯片的AI创新应用分享!

大模型技术的不断升级及应用落地&#xff0c;正在推动人工智能技术发展进入新的阶段&#xff0c;而智能化快速增长和发展的市场对芯片提出了更高的要求&#xff1a;高算力、高性能、灵活性、安全性。可重构计算区别于传统CPU、GPU&#xff0c;以指令驱动的串行执行方式&#xf…

丑数的求解

题目描述 我们把只包含质因子 2、3 和 5 的数称作丑数&#xff08;Ugly Number&#xff09;。求按从小到大的顺序的第 n 个丑数。 示例: 输入: n 10 输出: 12 解释: 1, 2, 3, 4, 5, 6, 8, 9, 10, 12 是前 10 个丑数。 算法思想 由题意可知一个丑数可以通过另一个丑数 * 2 …

一些关于设计原理和设计模式的问题

1.请解释一下单一职责原则&#xff08;SRP&#xff09;是什么&#xff0c;为什么它在软件设计中很重要&#xff1f; 2.能否举一个您在项目中应用开放封闭原则&#xff08;OCP&#xff09;的例子&#xff0c;并解释一下为什么该原则对于软件扩展很重要&#xff1f; 3.依赖倒置…