【vue2父组件调用子组件方法之slot的使用】

父组件调用子组件方法之slot的使用

具体功能需求:

一个页面,点击按钮,打开一个弹窗。弹窗有自定义表单和公共表单,提交的时候要获取两个表单的数据以及复显表单数据
为什么使用插槽了,因为我需要在弹窗中复用公共表单,而自定义表单是不固定的,所以需要动态加载。

1、 实现方式 直接通过插槽的 this.$slots 来获取子组件的方法

注意:使用的ui组件库是iview

页面 index.vue

<template ><div><Button type="primary" @click="handleOpen">打开弹窗 </Button><FormModal :modalVisibleProp.sync="modalVisibleProp"><template slot="customForm"><FormCustom /></template></FormModal></div>
</template><script>
import FormModal from './FormModal.vue';
import FormCustom from './FormCustom.vue';
export default {name: '',components: {FormModal,FormCustom},data() {return {modalVisibleProp: false};},methods: {// 新增handleOpen() {this.modalVisibleProp = true;}}
};
</script>

弹窗组件 FormModal.vue

<template><Modal v-model="visible" title="测试" width="40" @on-visible-change="onVisibleChange" @on-cancel="handleReset"><div><slot name="customForm"></slot><FormCommon ref="commonForm" /></div><div class="drawer-footer"><Button @click="handleReset">取消</Button>&nbsp;<Button type="primary" :loading="modalLoading" @click="ok">提交</Button></div></Modal>
</template>
<script>
import FormCommon from './FormCommon.vue';
export default {name: 'FormModal',components: {FormCommon},props: {modalVisibleProp: {type: Boolean,default: false}},data() {return {};},computed: {visible: {get: function () {return this.modalVisibleProp;},set: function () {}}},methods: {async ok() {try {let customFormValue = {};const customFormInstance = this.$slots.customForm[0].componentInstance;if (customFormInstance && typeof customFormInstance.getData === 'function') {customFormValue = await customFormInstance.getData(); // 自定义表单获取数据}const commonFormValue = await this.$refs.commonForm.getData(); // 公共表单获取数据} catch (error) {console.log(error);}},handleReset() {this.$emit('update:modalVisibleProp', false);},onVisibleChange(visible) {if (!visible) {this.handleReset();}}}
};
</script>

自定义表单 FormCustom.vue

<template><Form ref="form" :model="formItem" :rules="formItemRules" :label-width="135"><FormItem label="custom" prop="a"><Input v-model="formItem.a" placeholder="请输入内容"> </Input></FormItem></Form>
</template>
<script>
export default {name: '',data() {return {formItem: {a: 'customData'},formItemRules: {a: [{ required: true, message: '不能为空' }]}};},methods: {async getData() {const valid = await this.$refs.form.validate();if (valid) {return this.formItem;} else {return false;}},setData(data) {this.formItem = data;}}
};
</script>

公共表单 FormCommon.vue

<template><Form ref="form" :model="formItem" :rules="formItemRules" :label-width="135"><FormItem label="common" prop="b"><Input v-model="formItem.b" placeholder="请输入内容"> </Input></FormItem></Form>
</template>
<script>
export default {name: '',data() {return {formItem: {b: 'commonData'},formItemRules: {b: [{ required: true, message: '不能为空' }]}};},methods: {async getData() {const valid = await this.$refs.form.validate();if (valid) {return this.formItem;} else {return false;}},setData(data) {this.formItem = data;}}
};
</script>

示例:
在这里插入图片描述

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

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

相关文章

【HarmonyOS】鸿蒙将资源文件夹Resource-RawFile下的文件存放到沙箱目录下

【HarmonyOS】鸿蒙将资源文件夹Resource-RawFile下的文件存放到沙箱目录下 一、问题背景 应用开发中&#xff0c;我们经常会遇到一些文件原先是放在资源文件夹 rawfile下&#xff0c;但是逻辑处理时&#xff0c;需要转移到本地沙箱才能操作。这种情况下&#xff0c;就需要将将…

ubuntu 网络管理--NetworkManager

ubuntu 网络管理--NetworkManager 1 介绍2 NetworkManager 命令2 nmcli 命令显示可用的wifi AP连接wifi检查网络连接 ?? 如何删除删除网络连接查看设备状态添加一个新的以太网连接设置静态 IP 地址启用并测试连接添加新的wifi连接 3 其他命令参考 1 介绍 NetworkManager 是标…

Unity功能模块一对话系统(1)前置准备

也许你也曾被游戏中的对话系统深深吸引&#xff0c;那些精心设计的对白、鲜活的角色配音、甚至是简单的文字对话&#xff0c;往往能让玩家产生强烈的代入感和情感共鸣。如果你正在开发一款游戏&#xff0c;或者计划为你的项目加入一个引人入胜的对话系统&#xff0c;那么 Unity…

【自留】Unity VR入门

帮老师写的&#xff0c;自留&#xff0c;不保证是很好的教程。 1.PICO开发指南&#xff08;官方&#xff09; 在该页面&#xff0c;能找到大部分能实现的功能&#xff0c;以及实现方式。非常推荐&#xff01;PICO Unity Integration SDK | PICO 开发者平台 2.如何快速入门&…

以太网帧结构

以太网帧结构 目前&#xff0c;我们局域网当中应用最广的技术或者协议啊&#xff0c;就是以太网。我们首先来看一下以太网的真结构。这块内容这里边再系统的来给大家去展开说一下&#xff0c;以太网真格式就如下面这个图。所示前面有八个字节&#xff0c;是用于时钟同步的&…

【C语言练习(17)—输出杨辉三角形】

C语言练习&#xff08;17&#xff09; 文章目录 C语言练习&#xff08;17&#xff09;前言题目题目解析整体代码 前言 杨辉三角形的输出可以分三步&#xff0c;第一步构建一个三角形、第二步根据规律将三角形内容填写、第三步将三角形以等腰的形式输出 题目 请输出一个十行的…

Java圣诞树

目录 写在前面 技术需求 程序设计 代码分析 一、代码结构与主要功能概述 二、代码功能分解与分析 1. 类与常量定义 2. 绘制树的主逻辑 3. 彩色球的绘制 4. 动态效果的实现 5. 窗口初始化 三、关键特性与优点 四、总结 写在后面 写在前面 Java语言绘制精美圣诞树…

YashanDB 23.2 YAC -单库多实例架构多活共享集群安装部署指南

一、概述 1.1 文档目标 ​ 本说明旨在指导技术人员在 CentOS 7 x86_64 操作系统上完成崖山数据库企业版 23.2 的共享集群安装与部署。通过系统架构、集群拓扑及部署需求的精确描述&#xff0c;帮助读者在开始安装前对崖山数据库的架构形成清晰认识。本文以高效、稳定、安全为…

uniapp 文本转语音

uniapp 文本转语音 基于 Minimax API 的 UniApp 文本转语音工具&#xff0c;支持文本分段、队列播放、暂停恢复等功能。目前只内置了 Minimax文本转语音Minimax 的语音生成技术以其自然、情感丰富和实时性强而著称 API_KEY、GroupId 获取方法 https://platform.minimaxi.com…

ArrayList源码解析

1、介绍 1、可扩容&#xff0c;允许存储任何元素&#xff0c;包括null。这个类提供了一些方法来操纵数组大小&#xff0c;大致相当于Vector类。 2、ArrayList的容量是表示存储数组元素的大小&#xff0c;容量至少大于列表大小&#xff0c;在容量不足时&#xff0c;会自动扩容至…

ElementPlus 自定义封装 el-date-picker 的快捷功能

文章目录 需求分析 需求 分析 我们看到官网上给出的案例如下&#xff0c;但是不太满足我们用户想要的快捷功能&#xff0c;因为不太多&#xff0c;因此需要我们自己封装一些&#xff0c;方法如下 外部自定义该组件的快捷内容 export const getPickerOptions () > {cons…

GitLab 服务变更提醒:中国大陆、澳门和香港用户停止提供服务(GitLab 服务停止)

目录 前言 一. 变更详情 1. 停止服务区域 2. 邮件通知 3. 新的服务提供商 4. 关键日期 5. 行动建议 二. 迁移指南 三. 注意事项 四. 相关推荐 前言 近期&#xff0c;许多位于中国大陆、澳门和香港的 GitLab 用户收到了一封来自 GitLab 官方的重要通知。根据这封邮件…

使用Grafana中按钮插件实现收发HTTP请求

最近项目中需要监控分布式集群的各项指标信息&#xff0c;需要用到PrometheusGrafana的技术栈实现对分布式集群的各个节点状态进行可视化显示&#xff0c;但是要求前端需要提供一个易用的接口让用户可以触发一些操作&#xff0c;例如负载高时进行负载均衡或弹性伸缩。网上找到的…

【前端】MVC模式详解:如何构建高效的Web应用程序?

&#x1f4a5; 欢迎来到[爱学习的小羊]的博客&#xff01;希望你能在这里发现有趣的内容和丰富的知识。同时&#xff0c;期待你分享自己的观点和见解&#xff0c;让我们一起开启精彩的交流旅程&#xff01;&#x1f31f;> 首页&#xff1a;爱学习的小羊 – 热爱AI、热爱Pyt…

对一篇单细胞RNA综述的评述:细胞和基因质控参数的选择

原文链接&#xff1a; https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6072887 摘要 单细胞RNA测序技术的发展加深了我们对于细胞作为功能单元的理解&#xff0c;不仅能基于成百到成千上万个单细胞的基因表达谱得到新的结论&#xff0c;还能发现新的具有特异基因表达谱的细胞…

【再谈设计模式】享元模式~对象共享的优化妙手

一、引言 在软件开发过程中&#xff0c;我们常常面临着创建大量细粒度对象的情况&#xff0c;这可能会导致内存占用过高、性能下降等问题。享元模式&#xff08;Flyweight Pattern&#xff09;就像是一位空间管理大师&#xff0c;它能够在不影响功能的前提下&#xff0c;有效地…

windos挂载目录到linux

验证环境麒麟V10 1: 在windows任意目录设置共享文件夹 2&#xff1a;记住网络路径\LAPTOP-86JV6NT1\gantie13_sdk 在linux中替换为本机ip级相对路径 比如本级ip是192.168.23.23&#xff0c;linux环境需要ping通本地地址 3&#xff1a; sudo apt-get install cifs-utils sud…

基于STM32单片机矿井矿工作业安全监测设计

基于STM32单片机矿井矿工作业安全监测设计 目录 项目开发背景设计实现的功能项目硬件模块组成设计思路系统功能总结使用的模块技术详情介绍总结 1. 项目开发背景 随着矿井矿工作业环境的复杂性和危险性逐渐增加&#xff0c;矿井作业安全问题引起了社会各界的广泛关注。传统的…

WebRTC服务质量(11)- Pacer机制(03) IntervalBudget

WebRTC服务质量&#xff08;01&#xff09;- Qos概述 WebRTC服务质量&#xff08;02&#xff09;- RTP协议 WebRTC服务质量&#xff08;03&#xff09;- RTCP协议 WebRTC服务质量&#xff08;04&#xff09;- 重传机制&#xff08;01) RTX NACK概述 WebRTC服务质量&#xff08;…

Java爬虫技术:按关键字搜索VIP商品详情

在数字化时代&#xff0c;电子商务平台的竞争日益激烈&#xff0c;而精准的数据采集和分析成为了企业获取竞争优势的关键。对于电商平台而言&#xff0c;能够根据用户输入的关键字快速搜索并展示VIP商品的详细信息&#xff0c;不仅能够提升用户体验&#xff0c;还能够增加销售机…