以前一直想,每次封装一个弹窗组件的时候,一直特别复杂,父传子,子传父,各种来回绕,来回修改。
一直想如何才能更加简化,但是一直没时间,今天终于抽时间出来封装了一下
本次封装简化了很多的代码,再也不用父传子,子传父,各种来回绕,来回修改了。
实现功能如下:
2.所用技术
下面我来说一下,如何利用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 = () => {
homeModalRef.value.handleClick()
}
const close = () => {
getInitTable()
}
const getInitTable = () => {
console.log('66666')
}
</script>
<style scoped lang="less">
div{
margin-top: 20px;
}
</style>
子组件代码
<template>
<div>
<a-modal
v-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: ''
});
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>