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

Vue3.2组件如何封装,以弹窗组件的封装为例

以前一直想,每次封装一个弹窗组件的时候,一直特别复杂,父传子,子传父,各种来回绕,来回修改。
一直想如何才能更加简化,但是一直没时间,今天终于抽时间出来封装了一下
本次封装简化了很多的代码,再也不用父传子,子传父,各种来回绕,来回修改了。
实现功能如下:
//拆分了表格组件和弹窗组件
//实现在父组件中,控制弹窗的显示与隐藏
//在弹窗子组件中,修改内容后,父组件内容对应更新。
2.所用技术
//1.defineExpose 用于导出子组件的方法和数据
//2.defineEmits 用于子组件通知父组件执行操作
下面我来说一下,如何利用defineExpose和defineEmits来封装属于自己的组件吧
为了方便演示,这里就不上什么表格了,简单的用父组件和子组件进行演示,直接上代码
父组件代码
<template><div><a-button type="primary" status="danger" @click="show">showModal</a-button><!-- 为弹窗组件绑定ref  并且绑定子传父的emit事件 --><homeModal ref="homeModalRef" @update="close"></homeModal></div>
</template><script setup lang="ts">
import { ref, watch } from 'vue';
import homeModal from './component/homeModal.vue'const homeModalRef = ref()
const show = () => {// 这里是调用了弹窗组件中的方法,实现弹窗的显示 用到了defineExpose方法homeModalRef.value.handleClick()
}// 这里是接受触发事件后,父组件执行函数(各种请求)
const close = () => {getInitTable()
}
// 这里是模拟的函数请求方法
const getInitTable = () => {console.log('66666')
} </script>
<style scoped lang="less">
div{margin-top: 20px;
}
</style>
子组件代码
<template><div><a-modalv-model:visible="visible"title="Modal Form"@cancel="handleCancel"@ok="handleOk"><a-form :model="form"><a-form-item field="name" label="Name"><a-input v-model="form.name" /></a-form-item><a-form-item field="post" label="Post"><a-select v-model="form.post"><a-option value="post1">Post1</a-option><a-option value="post2">Post2</a-option><a-option value="post3">Post3</a-option><a-option value="post4">Post4</a-option></a-select></a-form-item></a-form></a-modal></div>
</template><script setup lang="ts">
import { reactive, ref } from 'vue';
const visible = ref(false);const form = reactive({name: '',post: ''
});// 绑定emit事件
const emit = defineEmits<{(event:'update'):void
}>()const handleClick = () => {visible.value = true;
};const handleOk = () => {if (form.name !== '') {handleCancel()// 执行emit('update')}
};
const handleCancel = () => {visible.value = false;
}// 导出方法
defineExpose({handleClick
})</script>
<style scoped lang="less"></style>
http://www.lryc.cn/news/168927.html

相关文章:

  • Vue知识系列(5)每天10个小知识点
  • Java基础题08——数组(查找下标所对应的值)
  • LinkedList 源码分析
  • 跑步锻炼(蓝桥杯)
  • 【SLAM】视觉SLAM简介
  • Visual Studio2019报错
  • ffplay源码解析-PacketQueue队列
  • Flowable主要API介绍
  • TensorFlow与pytorch特定版本虚拟环境的安装
  • 【SpringMVC】拦截器JSR303的使用
  • Java - LambdaQueryWrapper 的常用方法
  • Selenium常见问题解析
  • 【npm】npm私有库的使用-绑定
  • spring seccurity OAuth 2.0授权服务器工作流程
  • 【Tensorflow 2.12 电影推荐系统之排序模型】
  • ROS2-IRON Ubuntu-22.0 源码下载失败解决方法 vcs import --input
  • 百度SEO优化技巧大揭秘(百度SEO优化策略,提升网站排名)
  • JavaScript:二进制数组【笔记】
  • 华为云认证考试包含哪些内容?
  • 进程程序替换
  • 理解HTTPS/TLS/SSL(二)可视化TLS握手过程并解密加密数据
  • 一文详解TCP三次握手四次挥手
  • PDF怎么转图片?四种转换方法分享
  • 华为OD机试 - 压缩报文还原 - 正则表达式(Java 2023 B卷 100分)
  • 电商API的应用价值:淘宝1688京东API接口系列
  • day38 代码回想录 斐波那契数爬楼梯使用最小花费爬楼梯
  • Flink DataStream 体系
  • Linux的调试工具 - gdb(超详细)
  • 已知平面内三点,求其平面的法向量
  • HTML