当前位置: 首页 > news >正文

web前端之vue组件传参、各种传参的不同写法、语法糖

MENU

  • vue2
    • ref+emit
  • vue3
    • 语法糖+ref+emit(一)
    • 语法糖(二)


vue2

ref+emit

子组件

<template><div><el-dialogtitle="新增":visible.sync="dialogFormVisible"@close="handleClose"><el-form :model="form"><el-form-item label="姓名"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="年龄"><el-input v-model="form.age"></el-input></el-form-item></el-form><div slot="footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormVisible = false">确 定</el-button></div></el-dialog></div>
</template><script>
export default {name: "FormPanel",data() {return {dialogFormVisible: false,form: {name: "",age: "",},};},methods: {/*** 关闭回调*/handleClose() {this.$emit("handleCallback", { id: "6886", type: 2 });},/*** 打开* @param {Object} row 父组件传来参数*/handleOpen(row) {console.log("父组件传来参数", row);this.dialogFormVisible = true;},},
};
</script>

父组件

<template><div><el-button type="primary" @click="handleOpenPanel">新增</el-button><form-panel ref="refFormPanel" @handleCallback="handleCall"></form-panel></div>
</template><script>
import FormPanel from "./components/formPanel.vue";export default {name: "Parent",components: { FormPanel },methods: {/*** 弹窗关闭回调* @param {Object} res 子组件传回参数*/handleCall(res) {console.log("子组件传回参数: ", res);},/*** 通过ref打开弹窗面板*/handleOpenPanel() {this.$refs.refFormPanel.handleOpen({ id: "a1", type: 1 });},},
};
</script>

vue3

语法糖+ref+emit(一)

子组件
html

<template><div><el-dialogv-model="isDialog":title="titleObj[title]"width="50%"append-to-body><el-form :model="dialogForm" label-width="68"><el-row :gutter="10"><el-col :span="12"><el-form-item label="姓名" required><el-inputclass="w_100_"v-model="dialogForm.name"placeholder="请输入姓名"/></el-form-item></el-col><el-col :span="12"><el-form-item label="年龄"><el-inputclass="w_100_"v-model="dialogForm.age"placeholder="请输入年龄"/></el-form-item></el-col></el-row></el-form><el-row class="mt_20"><el-col class="d_f jc_fe" :span="24"><el-button @click="handleCancel">取消</el-button><el-button type="primary" @click="handleSubmit">确认</el-button></el-col></el-row></el-dialog></div>
</template><script name="FormPanel" setup>
// 这个emit很重要
const emit = defineEmits(["handleFormCallback"]);
let info = reactive({isDialog: false,title: "add",titleObj: {add: "新增",edit: "编辑",},dialogForm: {// 名称name: "",// 年龄age: ""},}),{ isDialog, title, titleObj, dialogForm } = toRefs(info);/*** 确认(提交)*/
async function handleSubmit() {console.log("表单数据: ", dialogForm.value);// 提交成功后触发父组件事件emit("handleFormCallback", title);
}
/*** 取消*/
function handleCancel() {isDialog.value = !isDialog;
}
/*** 父组件执行* @param {String} id 行id* @param {String} key 标题类型*/
async function handleOpenFormPanel(id = "", key = "add") {title = key;if (key === "add") {dialogForm.value = {// 名称name: "",// 年龄age: ""};} else {console.log("根据id获取详情: ", id);}nextTick(async () => {isDialog.value = true;});
}// 暴露方法与属性(这个是重点)
// 如果不暴露,则父组件无法执行此函数
defineExpose({handleOpenFormPanel,
});
</script>


父组件

<template><div><el-button type="success" @click="handleAdd('add')">新增</el-button><el-button type="primary" @click="handleEdit('id68', 'edit')">编辑</el-button><!-- 新增/编辑面板 --><form-panel ref="refFormPanel" @handleFormCallback="handleCallback"></form-panel></div>
</template><script name="Parent" setup>
import FormPanel from "./components/formPanel.vue";
const refFormPanel = ref(null);/*** 新增* @param {String} type 面板标题类型*/
function handleAdd(type) {refFormPanel.value.handleOpenFormPanel("", type);
}
/*** 编辑* @param {String} id 行id* @param {String} type 面板标题类型*/
function handleEdit(id, type) {refFormPanel.value.handleOpenFormPanel(id, type);
}
/*** 子组件回调*/
function handleCallback(res = "") {console.log("子组件返回的数据: ", res);
}
</script>

语法糖(二)

相关文章:

web前端之vue组件传参、各种传参的不同写法、语法糖

MENU vue2refemit vue3语法糖refemit(一)语法糖(二) vue2 refemit 子组件 <template><div><el-dialogtitle"新增":visible.sync"dialogFormVisible"close"handleClose"><el-form :model"form"><el-form…...

基于Nexus搭建Maven私服基础入门

什么是Nexus&#xff1f;它有什么优势&#xff1f; 要了解为什么需要nexus的存在&#xff0c;我们不妨从以下几个问题来简单了解一下: 为什么需要搭建私服&#xff1f;如果没有私服会出现什么问题&#xff1f; 对于企业开发而言&#xff0c;如果没有私服&#xff0c;我们所有…...

JavaScript自执行函数:用途、好处

JavaScript中的自执行函数是一个常见的编程技巧&#xff0c;它可以在特定的场景中发挥重要作用。本文将介绍自执行函数的用途、好处&#xff0c;并提供代码示例进行说明。 引言 在JavaScript编程中&#xff0c;自执行函数是一种特殊的函数调用方式&#xff0c;它能够在定义后…...

Git使用无法拉取

错误提示&#xff1a; error setting certificate verify locations: CAfile: C:/Program Files/Git/mingw64/ssl/certs/ca-bundle.crt CApath: none 问题原因&#xff1a; 这个问题是因为git配置里crt证书的路径不正确导致的 解决办法&#xff1a; 这个路径配置是在C:\Pro…...

来聊聊CAS

什么是CAS CAS全称Compare-And-Swap&#xff0c;是一种无锁编程算法&#xff0c;即比较当前的值与旧值是否相等若相等则进行修改操作(乐观锁机制)&#xff0c;该类常用于多线程共享变量的修改操作。而其底层实现也是基于硬件平台的汇编指令&#xff0c;JVM只是封装其调用仅此而…...

【EventBus】EventBus源码浅析

二、EventBus源码解析 目录 1、EventBus的构造方法2、订阅者注册 2.1 订阅者方法的查找过程2.2 订阅者的注册过程1. subscriptionsByEventType 映射&#xff1a;2. typesBySubscriber 映射&#xff1a;2.3 总结订阅者的注册过程 3、事件的发送 3.1 使用Post提交事件3.2 使用p…...

Buck电源设计常见的一些问题(二)MOS管炸机问题

MOS管炸机问题 1.概述2.MOS管的相关参数3.过电压失效4.过电流失效5.静电放电和热失效1.概述 在我们做电源产品或者电机控制器时候,经常会坏MOS管。我相信90%以上的硬件工程师在职场生涯中都会遇到这类问题。然而这类问题也总是让人防不胜防。经常我们都会开玩笑的说,没烧过管…...

Javascript高频面试题

系列文章目录 文章目录 系列文章目录前言1.JavaScript常见数据类型null 和 undefind区别symbol&#xff08;ES6新增&#xff09;、bigInt&#xff08;ES10新增&#xff09; 2.JavaScript判断数据类型的方式3. 和 区别&#xff0c;分别在什么情况使用&#xff1f;4.变量声明 va…...

锁--07_2---- index merge(索引合并)引起的死锁

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 案例分析生产背景死锁日志表结构执行计划 EXPLAN为什么会用 index_merge&#xff08;索引合并&#xff09;为什么用了 index_merge就死锁了解决方案注&#xff1a;M…...

后端打印不了trace等级的日志?-SpringBoot日志打印-Slf4j

在调用log变量的方法来输出日志时&#xff0c;有以上5个级别对应的方法&#xff0c;从不太重要&#xff0c;到非常重要 调用不同的方法&#xff0c;就会输出不同级别的日志。 trace&#xff1a;跟踪信息debug&#xff1a;调试信息info&#xff1a;一般信息warn&#xff1a;警告…...

声明式编程Declarative Programming

接下来要介绍第五种编程范式 -- 声明式编程。分别从它的优缺点、案例分析和适用的编程语言这三个方面来介绍这个歌编程范式。 声明式编程是一种编程范式&#xff0c;其核心思想是通过描述问题的性质和约束&#xff0c;而不是通过描述解决问题的步骤来进行编程。这与命令式编程…...

人工智能与天文:技术前沿与未来展望

人工智能与天文&#xff1a;技术前沿与未来展望 一、引言 随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;在各个领域的应用越来越广泛。在天文领域&#xff0c;AI也发挥着越来越重要的作用。本文将探讨人工智能与天文学的结合&#xff0c;以及这种结合带…...

JeecgBoot 框架升级至 Spring Boot3 的实战步骤

JeecgBoot 框架升级 Spring Boot 3.1.5 步骤 JEECG官方推出SpringBoot3分支&#xff1a;https://github.com/jeecgboot/jeecg-boot/tree/springboot3 本次更新由于属于破坏式更新&#xff0c;有几个生态内的组件&#xff0c;无法进行找到平替或无法升级&#xff0c;目前尚不完…...

论文阅读——Semantic-SAM

Semantic-SAM可以做什么&#xff1a; 整合了七个数据集&#xff1a; 一般的分割数据集&#xff0c;目标级别分割数据集&#xff1a;MSCOCO, Objects365, ADE20k 部分分割数据集&#xff1a;PASCAL Part, PACO, PartImagenet, and SA-1B The datasets are SA-1B, COCO panopt…...

gitlab下载,离线安装

目录 1.下载 2.安装 3.配置 4.启动 5.登录 参考&#xff1a; 1.下载 根据服务器操作系统版本&#xff0c;下载对应的RPM包。 gitlab官网&#xff1a; The DevSecOps Platform | GitLab rpm包官网下载地址: gitlab/gitlab-ce - Results in gitlab/gitlab-ce 国内镜像地…...

【SpringBoot篇】Interceptor拦截器 | 拦截器和过滤器的区别

文章目录 &#x1f339;概念⭐作用 &#x1f384;快速入门⭐入门案例代码实现 &#x1f6f8;拦截路径&#x1f354;拦截器interceptor和过滤器filter的区别&#x1f386;登录校验 &#x1f339;概念 拦截器&#xff08;Interceptor&#xff09;是一种软件设计模式&#xff0c;…...

conan入门(三十六):在set_version方法中从pom.xml中读取版本号实现动态版本定义

一般情况下&#xff0c;我们通过self.version字段定义conan 包的版本号如下&#xff1a; class PkgConan(ConanFile):name "pkg"version "1.7.3"因为版本号是写死的&#xff0c;所以这种方式有局限性&#xff1a; 比如我的java项目中版本号是在pom.xml中…...

为什么 GAN 不好训练

为什么 GAN 不好训练&#xff1f;先看 GAN 的损失&#xff1a; 当生成器固定时&#xff0c;堆D(x)求导&#xff0c;推理得到&#xff08;加号右边先对log求导&#xff0c;再对负项求导&#xff09; 然后在面对最优Discriminator时&#xff0c;Generator的优化目标就变成了&…...

select、poll、epoll 区别有哪些

文章目录 select、poll、epoll 区别有哪些&#xff1f;select&#xff1a;poll&#xff1a;epoll&#xff1a; select、poll、epoll 区别有哪些&#xff1f; select&#xff1a; 它仅仅知道了&#xff0c;有 I/O 事件发生了&#xff0c;却并不知道是哪那几个流&#xff08;可…...

大模型下开源文档解析工具总结及技术思考

1 基于文档解析工具的方法 pdf解析工具 导图一览&#xff1a; PyPDF2提取txt&#xff1a; import PyPDF2 def extract_text_from_pdf(pdf_path):with open(pdf_path, rb) as file:pdf_reader PyPDF2.PdfFileReader(file)num_pages pdf_reader.numPagestext ""f…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

云原生周刊:k0s 成为 CNCF 沙箱项目

开源项目推荐 HAMi HAMi&#xff08;原名 k8s‑vGPU‑scheduler&#xff09;是一款 CNCF Sandbox 级别的开源 K8s 中间件&#xff0c;通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度&#xff0c;为容器提供统一接口&#xff0c;实现细粒度资源配额…...

如何做好一份技术文档?从规划到实践的完整指南

如何做好一份技术文档&#xff1f;从规划到实践的完整指南 &#x1f31f; 嗨&#xff0c;我是IRpickstars&#xff01; &#x1f30c; 总有一行代码&#xff0c;能点亮万千星辰。 &#x1f50d; 在技术的宇宙中&#xff0c;我愿做永不停歇的探索者。 ✨ 用代码丈量世界&…...