【Vue2 子组件调用父组件打开抽屉】

于 2024-07-26 13:30:46 发布
阅读量190 收藏
点赞数 1
分类专栏： Vue2 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49476491/article/details/140710767
版权

子组件调用父组件打开抽屉

在某些特殊情况下，需要通过父组件打开抽屉。比如在编辑页面，需要打开抽屉，就需要从父组件中打开，如果有子组件打开就只会呈现在子组件页面中。
以下例子：子组件调用父组件打开抽屉
在这里插入图片描述

  1. 步骤：在父组件定义中抽屉
    在这里插入图片描述

  2. 在data中定义抽屉
    在这里插入图片描述

  3. 在需要打开的地方，定义open事件
    在这里插入图片描述
    传值可以用：的方式传到子组件，子组件用props: {}接收，就可以
    在这里插入图片描述

  4. 在子组件中的table中，定义add点击事件，调用父组件
    在这里插入图片描述
    在这里插入图片描述

  5. 打开抽屉
    在这里插入图片描述

晚风吹南风
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2.0 父组件调用子组件的方法
周家大小姐
10-07 1400
仓库分支为goods:https://gitee.com/zhouyunfang/vue3.0-element-bootstrap/tree/goods/ 子组件: <div class="clearfix" slot="header" style="margin:-10px;"> <span>高级搜索</span> &...
Vue子组件调用父组件的方法
weixin_45267702的博客
12-07 763
Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法，这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父 <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child'; export de
vue2实现一个抽屉组件封装
weixin_43845137的博客
04-25 678
【代码】vue2实现一个抽屉组件封装。
前端vue2实现头部组件(自定义背景icon+抽屉式使用指南展示)
在写作的路上持续输出。
02-02 1127
前端vue2实现头部组件(自定义背景icon+抽屉式使用指南展示)
推荐开源宝藏：Vue2-Slideout-Panel，打造灵活侧滑面板体验
gitblog_00011的博客
06-05 371
推荐开源宝藏：Vue2-Slideout-Panel，打造灵活侧滑面板体验 vue-slideout-panelVue JS component for stackable slideout panels项目地址:https://gitcode.com/gh_mirrors/vu/vue-slideout-panel 在前端开发的浩瀚世界里，用户体验一直是产品成功的关键。今天，我们要向您隆重推荐...
vue2使用ant design 的drawer组件显示不了抽屉内容与collapse组件需要点击两次才展开的问题
weixin_46687032的博客
05-18 3591
由于ant官方文档用的是ts和vue3写的，所以用vue2可能会有问题实现不了(也有可能是官方文档的问题，这文档真的很难看懂，需要去搜索其他文章才能够实现，这里记录下我的踩坑记录) Drawer 抽屉组件 Ant 官方文档-Drawer组件 原先我是用了第一个例子（基本用法，如下图） 但是，显示不了抽屉内容，按f12发现drawer的内容并不在dom中，最后参考了这篇文章成功显示出来了。主要就是v-model:visible改成:visible；@after-visible-change也没反应，改成.
vue2使用elementui抽屉 关闭之前对比抽屉展示的组件数据是否有改动。项目实战。
L_TZzzz的博客
09-09 630
JS文件 export default function comparison(vm, obj = {}) { // keys 指定需要对比的key // arr 指定不需要对比的key // 两个都不传 则默认对比data里面定义的所有的值。 if (!vm) return console.warn('第一个参数需要VM或者VC'); if (typeof obj != 'object') return console.warn('第二个参数是一个JSON对
Vue中关闭弹窗组件时销毁并隐藏操作
11-19
Vue组件的生命周期中有多个关键的钩子函数，其中`mounted`钩子在组件实例被挂载到DOM中时只调用一次。如果在`mounted`中进行了数据初始化，那么当弹窗关闭后再打开，由于Vue默认并不会销毁该组件，`mounted`钩子不会...
vuetify-snackbars:基于vuetify组件封装的以js驱动的消息条插件
04-17
现在，你可以在你的Vue组件中使用`this.$snackbar`来展示snackbars。例如，创建一个简单的snackbar： ```javascript this.$snackbar.show({ text: '这是一个消息条通知', color: 'success', // 可选颜色有：error...
vue实现点击按钮“查看详情”弹窗展示详情列表操作
10-14
综上所述，实现“查看详情”功能的关键在于正确地创建和管理Vue组件，包括设置数据、绑定事件、定义方法以及正确引用和注册子组件。同时，要处理好组件间的通信，如通过`v-model`和`ref`来控制组件的状态和交互。
2个不同种类的抽屉
09-17
Vue.js社区也有`vuetify`、`quasar`等框架提供了抽屉组件。这些库通常会包含动画效果、可配置选项以及对响应式设计的良好支持，使得抽屉在不同设备上表现一致。 4. 3个抽屉第三方库介绍： 虽然没有具体的文件名称，...
vue 客户端
05-29
Vue.js 是一款轻量级的前端JavaScript框架，以其易学易用、高性能和组件化的特点在Web开发领域受到...通过这个项目，你可以深入理解Vue的生命周期、组件通信、路由跳转、API调用等核心概念，从而提升你的前端开发技能。
VUE组件 之 Drawer 抽屉
YUSIR 完美CODING世界
11-08 6640
一、源码地址 https://github.com/imxiaoer/DrawerForVue 二、效果图 三、具体代码 drawer.vue <template> <div class="drawer"> <div :class="maskClass" @click="closeByMask"></div&gt...
Vue实现CSDN评论区的抽屉drawer效果,不需要用el-drawer组件。
小李不背锅的博客
09-02 989
【代码】Vue实现CSDN评论区的抽屉drawer效果,不需要用el-drawer组件。
嵌入式系统开发：深入理解信号机制及其在进程通信中的应用
08-24
这篇文件是一份关于嵌入式系统中信号机制的详细介绍，它不仅涵盖了信号的基本概念和特性，还深入探讨了信号的基本操作和应用场景。信号是软件中断的一种模拟，它允许异步进程中断正在运行的进程，以处理突发事件。这种机制对于嵌入式系统尤为重要，因为它可以确保系统对外部事件做出快速响应。 文档首先解释了信号的异步通信特性，即进程无需等待信号的到来，也无法预知信号何时到达。接着，它详细介绍了信号的命名规则和如何在Linux系统中查看信号与数字编码的对应关系。例如，使用命令kill -l可以列出所有信号及其对应的数字编码。 进一步，文档列举了产生信号的几种情况，包括用户操作、硬件异常、软件异常、调用kill函数和运行kill命令。每种情况下，文档都提供了详细的解释和示例，帮助读者理解信号是如何在不同情境下产生的。 文档还介绍了进程收到信号后的几种处理方式：忽略信号、执行系统默认动作或自定义信号处理函数。特别强调了SIGKILL和SIGSTOP信号不能被忽略，因为它们提供了一种可靠的进程终止方法。
资源androidioswinOpenOpenCV3.4.7
08-24
资源androidioswinOpenOpenCV3.4.7提取方式是百度网盘分享地址
java源码资源学生成绩系统(图形界面)
08-24
java源码资源学生成绩系统（图形界面）提取方式是百度网盘分享地址
资源OpenCV3视频分析跟踪对象指导视频+文档+源码
最新发布
08-24
资源OpenCV3视频分析跟踪对象指导视频+文档+源码资源大小2G提取方式是百度网盘分享地址
vue-element-admin的抽屉组件
09-23
抽屉组件是Vue-Element-Admin中一种常见的UI组件，通常用于在界面上打开一个侧边栏，展示与当前页面相关的信息或操作。抽屉组件通常由一个触发按钮和一个侧边栏组成，在点击触发按钮后，侧边栏会从页面的侧边滑出，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值