Vue3在使用antd-vue的Modal封装子组件时，visible失效的问题

最新推荐文章于 2025-04-10 14:48:29 发布
最新推荐文章于 2025-04-10 14:48:29 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： bug 闲杂 其他 文章标签： vue.js vue3 antd-vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyy_sd/article/details/127553543
版权

最近在使用vue3、antd-vue中的modal封装作为子组件，

在@ok="handleOk"

const handleOk = () => {
    context.emit("handleOk", "123");
};

子组件点击确定，父组件接受没有问题，弹窗可以消失，但是在子组件中使用

 @cancel="handle"时，父组件无法接收，并页面报错如下：

出现这个问题，需要看下子组件中是否有 v-model:visible="visible"，需要把v-model去掉，只保留:visible="visible" 就可以了

vue3 把antd 的Modal组件作为子组件时，本地运行是没问题的，打包后 cancel关闭事件触发无效
agua001的博客
04-20 3201
vue3 把antd 的Modal组件作为子组件时，本地运行是没问题的，打包后 cancel关闭事件触发无效
基于antd-vue图片组件封装优化
weixin_44191425的博客
12-09 1117
<template> <div class="clearfix"> <a-upload list-type="picture-card" :file-list="fileList" :headers="headers" @preview="handlePreview" :custom-request="customRequestFunction" :before-upload="beforeUp
vue3之弹窗，抽屉二次封装 v-model=“visible” 踩坑
Jocelyn_书
01-18 3220
当二次封装弹窗或者抽屉时，从父组件传visible给子组件时，子组件用v-model接收控制显示，控制台会报错。父组件在调用抽屉组件，给抽屉组件传控制显示的值时写法。子组件（抽屉组件）在使用父组件传过来控制显示的值时。
封装命令式组件：以 Vue 3 中的 Modal 弹窗为例
最新发布
Yue
04-10 1229
命令式组件是一种通过函数调用来控制组件行为的设计模式。与声明式组件不同，命令式组件不依赖于父组件的生命周期或数据流，而是通过直接调用函数来触发组件的渲染或销毁。这种方式特别适合处理一些独立性强、交互复杂的场景，例如弹窗、提示框、加载动画等。在 Vue 3 中，我们可以通过createApp方法动态创建一个子应用实例，并将其挂载到 DOM 上。这种技术为命令式组件的实现提供了基础支持。通过本文的介绍，我们成功实现了一个基于 Vue 3 的命令式 Modal 弹窗组件。
antd的Modal
qq_41549657的博客
07-06 4239
1.如何自定义modal的确认和取消按钮 (1)隐藏底部确认和取消按钮 使用Modal中的footer属性，如下： <Modal title="哈哈" visible={visible} onCancel={this.handleCancel} footer={ [] // 设置footer为空，去掉 取消 确定默认按钮 } > </Modal> (2)自定义底部按钮 使用Modal中的footer属性，如下：footer可以是一个数组，数组里面放的是按钮，可以根据需求
VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题
热门推荐
tangdou369098655的博客
05-14 1万+
VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题 这篇文档存成草稿2年了，最近终于有时间拉出来写完了。。。。 我们日常开发中经常遇到:visible.sync修饰符，特别是当你使用elementUI的时候，el-dialog组件如果不使用:visible.sync就会出现一些意想不到的问题，比如说疯狂报错给你看~~~ 场景： 父组件引用子组件 <child-dialog :visible="visible"><
vue3 把antd 的Modal组件作为子组件
m0_69439101的博客
05-12 777
1.在父组件，点击一个按钮，弹窗出现，把弹窗当做子组件。
antd-vue表格二次封装定制化
weixin_44191425的博客
08-16 977
index.vue <template> <div class="table"> <a-table :row-selection=" isRowSelection ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange, } : null .
Ant Design Vue结合vue-cropper打造图片裁剪上传组件，handlermapping作用
m0_66264533的博客
01-30 1023
}, }, } 模态框 CropperModal.vue <a-modal :visible=“visible” :title=“options.title” :maskClosable=“false” :confirmLoading=“confirmLoading” :width=“800” @cancel=“cancelHandel” <vue-cropper ref=“cropper” :img=“options.img” :info=“true” :autoCrop=“o
antd-vue上传图片组件封装
weixin_44191425的博客
08-13 655
<template> <div class="clearfix"> <a-upload :action="uploadUrl" list-type="picture-card" :file-list="fileList" :headers="headers" @preview="handlePreview" @change="handleChange($event)" :before
.Net中控件Visible属性设置为true失效，并不显示出来的问题
平凡之路
09-13 9520
问题：在设计界面的过程中，在主线程设置按钮和label控件的visible属性时无效的问题，论坛上看到有人说把控件删了重新添加，实验后无效。 问题根源：添加控件后，对其进行如下操作：在form设计页，点击选择控件后，找到visible属性，选择了false，然后再在代码里改变该属性，并不能显示出来。 解决方法：设计页必须设置为true，即可见，然后在formload事件中，再将其设置为fals...
Vue3中element中dialog对话框的visible的坑
weixin_52418790的博客
07-19 3369
vue3中使用element对话框的visible的坑
vue3中 :visible.sync 和slot报错
qq_54542367的博客
10-18 341
在使用element-plus中的组件库中常常会出现这个:visible.sync属性，但是这个时候我们的vue3项目会报错，这个时候直接把。
2024年Web前端最新Vue 组件通讯 props接受形式有哪些(1)，2024年最新Web前端高级开发面试题
2401_84619185的博客
05-11 227
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】高级前端工程师必备资料包。
vue3项目报错：v-model cannot be used on a prop, because local prop bindings are not writable
肖肖肖丽珠的博客
08-07 664
我使用了一个子组件的弹窗。弹窗的显示隐藏是父组件传过来的一个值获取的。之前也这样写过是没有问题的。查看了一下我的vue版本3.4.31。官网上面介绍说从 Vue 3.4 开始，推荐的实现方式是使用。于是我们按照官网介绍改成了下面这样就行了。
vue3+ts defineEmits update使用，v-model:visible 子组件传递数据给父组件
qq_42859450的博客
11-10 4658
vue3 defineEmits v-model:visible
Vue3.0（3）：v-model
weixin_41897680的博客
07-18 1516
v-model 双向绑定 这里只说在组件上的使用 v-model官方文档 2.0 在 2.x 中，在组件上使用 v-model 相当于绑定 value prop 和 input 事件 实例1 //父组件 <template> <div> <el-input v-model="msg" placeholder="请输入"></el-input> <model-test-1 v-model="msg"></model-te
在封装 全局组件时 遇到的问题 Vue3
weixin_42792519的博客
11-03 385
vue3 公共组件
vue3 antd 父组件调用子组件modal
10-25
在Vue3中，可以通过`ref`和`teleport`来实现父组件调用子组件的modal。 首先，在子组件中，需要使用`teleport`将modal渲染到body中，这样可以避免modal被父组件的样式影响。代码如下： ```html <div class="...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值