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

vue子组件关闭自己的方式(事件触发)

  • 背景:学习vue。在做项目图中使用cursor编写过程发现好的方式进行记录学习。
  • 子组件内部方法处理完逻辑后调用了handleClose方法,意图关闭自己,update:show:将自身props中的属性show更新为falseemit('close')触发了父页面的close事件,执行了handleFellowClose在关闭子页面的同时也同步更新了父页面的属性。
<u-popup v-model="show" mode="center" :border-radius="16" width="600rpx">
...
// 子页面
props: {show: {type: Boolean,default: false},
...
handleClose() {this.$emit('update:show', false);this.$emit('close');
}
// 父页面
<FellowSelector:show="showFellowSelector":fellowList="fellowList"@confirm="handleFellowConfirm"@close="handleFellowClose" />
...
http://www.dtcms.com/a/299011.html

相关文章:

  • 上证50指数分红和股指期货有什么关系?
  • MybatisPlus-18.插件功能-分页插件基本用法
  • Vue3 学习教程,从入门到精通,Vue3 样式绑定语法详解与案例(17)
  • 学习随想录-- web3学习入门计划
  • 【自动化运维神器Ansible】Ansible常用模块之File模块详解
  • 收银系统优惠功能架构:可扩展设计指南(含可扩展性思路与落地细节)
  • selenium自动化鼠标和键盘操作
  • 06-ES6
  • 【LLM】Kimi-K2模型架构(MuonClip 优化器等)
  • 详解力扣高频SQL50题之550. 游戏玩法分析 IV【中等】
  • qt c++ msvc2017编译器解决界面中中文乱码问题
  • 数据赋能(336)——技术平台——智能化运营
  • 动态SQL标签
  • AI-调查研究-39-多模态大模型量化 微调与量化如何协同最大化性能与效率?
  • opencv学习(图像梯度)
  • 像素、视野、光源,都有哪些因素影响测量精度?
  • 【数据结构】栈和队列的实现
  • 【Java EE初阶 --- 网络原理】传输层---UDP/TCP协议
  • Spring boot Grafana优秀的监控模板
  • C++:list(2)list的模拟实现
  • 高并发微服务限流算法方案对比与实践指南
  • 【音视频协议篇】WebRTC 快速入门
  • 嵌入式——C语言:指针②
  • Kotlin线程同步
  • TCP/IP 网络编程面试题及解答
  • 数智管理学(三十九)
  • train_model_components ——组件模型的灵感,灵感
  • PYTHON从入门到实践-15数据可视化
  • 震网(Stuxnet):打开潘多拉魔盒的数字幽灵
  • Android ADB命令之内存统计与分析