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

以前一直想,每次封装一个弹窗组件的时候,一直特别复杂,父传子,子传父,各种来回绕,来回修改。
一直想如何才能更加简化,但是一直没时间,今天终于抽时间出来封装了一下
本次封装简化了很多的代码,再也不用父传子,子传父,各种来回绕,来回修改了。
实现功能如下:
js 复制代码
//拆分了表格组件和弹窗组件
//实现在父组件中,控制弹窗的显示与隐藏
//在弹窗子组件中,修改内容后,父组件内容对应更新。
2.所用技术
js 复制代码
//1.defineExpose 用于导出子组件的方法和数据
//2.defineEmits 用于子组件通知父组件执行操作
下面我来说一下,如何利用defineExpose和defineEmits来封装属于自己的组件吧
为了方便演示,这里就不上什么表格了,简单的用父组件和子组件进行演示,直接上代码
父组件代码
js 复制代码
<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>
子组件代码
js 复制代码
<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: ''
});

// 绑定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>
相关推荐
无奈何杨7 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭14 分钟前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆18 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
程序员爱钓鱼28 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子30 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆30 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了31 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆36 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆37 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆37 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js