菜单 搜索
首页 前端知识 详细分析Vue3中的defineExpose（附Demo）

详细分析Vue3中的defineExpose（附Demo）

2024-08-14 22:08:58 前端知识 前端哥 429 546 我要收藏

目录

  • 前言
  • 1. 基本知识
  • 2. Demo
  • 3. 实战
    • 3.1 函数暴露
    • 3.2 导入子组件数据
    • 3.3 更新子表单数据

前言

其基本知识可参考官网：Vue3中的defineExpose

1. 基本知识

defineExpose 是 Vue 3 的 Composition API 中一个新的实用函数，用于在 <script setup> 语法下显式暴露组件的公共属性和方法

这在处理子组件时特别有用，允许父组件访问子组件的特定属性或方法

在 Vue 3 中，当我们使用 <script setup> 语法糖时，组件默认不会自动暴露内部的任何状态或方法给外部使用，为了显式暴露某些属性或方法，可以使用 defineExpose

示例Demo如下：

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

当父组件通过模板引用的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)

2. Demo

  1. 父组件渲染子组件 Child 并通过 ref 获取子组件的实例。
  2. 子组件中的 count 和 increment 方法通过 defineExpose 暴露出来。
  3. 当点击父组件中的 “Access Child Methods” 按钮时，父组件可以访问并调用子组件的 count 和 increment

子组件：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}

// 使用 defineExpose 来暴露 count 和 increment
defineExpose({
  count,
  increment,
});
</script>

父组件：

<template>
  <div>
    <Child ref="childRef" />
    <button @click="accessChild">Access Child Methods</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Child from './Child.vue';

const childRef = ref(null);

function accessChild() {
  if (childRef.value) {
    console.log('Current count:', childRef.value.count);
    childRef.value.increment();
    console.log('Count after increment:', childRef.value.count);
  }
}

onMounted(() => {
  if (childRef.value) {
    console.log('Child component mounted, initial count:', childRef.value.count);
  }
});
</script>

总的来说：

  • defineExpose 用于在 <script setup> 中显式暴露组件内部状态和方法
  • 父组件可以通过 ref 访问子组件实例并调用暴露的属性和方法
  • 使用 defineExpose 可以让组件更加模块化和可控，只有显式暴露的部分才能被外部访问，增强了封装性和安全性

这个功能在组件之间需要进行复杂交互时特别有用，尤其是在大型项目中，能够显著提升代码的可读性和可维护性

3. 实战

从入门到十实战，反复在反复，结合实战的Demo加深印象

3.1 函数暴露

也可通过函数进行暴露

<template>
  <div>
    <button @click="open">Fetch Data</button>
    <div v-if="detailLoading">Loading...</div>
    <div v-else>
      <div v-for="item in detailData.attachment1" :key="item">{{ item }}</div>
      <div v-for="item in detailData.attachment2" :key="item">{{ item }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import DangerousWorkApi from '@/api/DangerousWorkApi'

const detailLoading = ref(false)
const detailData = ref({})
const props = defineProps(['id'])
const queryId = 'some-query-id'

const getInfo = async () => {
  detailLoading.value = true
  try {
    detailData.value = await DangerousWorkApi.getDangerousWork(props.id || queryId)
    const attachment1 = detailData.value.attachment1;
    const attachment2 = detailData.value.attachment2;
    detailData.value.attachment1 = attachment1.split(",");
    detailData.value.attachment2 = attachment2.split(",");
  } finally {
    detailLoading.value = false
  }
}

defineExpose({ open: getInfo })

onMounted(() => {
  getInfo()
})
</script>

3.2 导入子组件数据

另外一个实战Demo加深印象

将 handleImport 方法改为接受参数，并传递 formData.chineseShipName 和 formData.shipVoyage

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="70%">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-row :gutter="20">
        <!-- ... 省略其它表单项 ... -->
      </el-row>
    </el-form>
    
    <el-tabs v-model="subTabsName">
      <el-tab-pane name="enterSite">
        <template #label>
          危险品进场申请单
          <el-button
            type="warning"
            plain
            @click="handleImport(formData.chineseShipName, formData.shipVoyage)"
            v-hasPermi="['dangerous:appointment-commission:enterSiteImport']"
            style="margin-left: 10px;"
          >
            <Icon icon="ep:upload" class="mr-5px" /> 一键导入
          </el-button>
        </template>
        <EnterSiteForm ref="enterSiteFormRef" :appointment-id="formData.id" :form-type="formType" />
      </el-tab-pane>
    </el-tabs>
    
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="formType !== 'detail'">保 存</el-button>
      <el-button @click="submitAndCommitForm" type="success" :disabled="formLoading" v-if="formType !== 'detail'">保存并提交预约</el-button>
      <el-button @click="dialogVisible = false" v-if="formType !== 'detail'">取 消</el-button>
    </template>
  </Dialog>

  <EnterSiteImportForm ref="importFormRef" @success="getList" />
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const importFormRef = ref(null)
    const handleImport = (chineseShipName, shipVoyage) => {
      importFormRef.value.open(chineseShipName, shipVoyage)
    }

    return {
      importFormRef,
      handleImport,
      // ... 省略其它数据和方法 ...
    }
  }
}
</script>

在导入对话框组件中，修改 open 方法以接受参数，并在组件中存储这些参数以便在提交时使用

另外一个文件如下：

defineOptions({ name: 'EnterSiteImportForm' })

const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中
const uploadRef = ref()
const importUrl =
  import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/dangerous/enterprise-registry/enterSiteImport'
const uploadHeaders = ref() // 上传 Header 头
const fileList = ref([]) // 文件列表


const chineseShipName = ref('') // 存储中文船名
const shipVoyage = ref('') // 存储船舶航次

/** 打开弹窗 */
const open = (shipName, voyage) => {
  dialogVisible.value = true
  fileList.value = []
  chineseShipName.value = shipName
  shipVoyage.value = voyage
  resetForm()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const submitForm = async () => {
  if (fileList.value.length == 0) {
    message.error('请上传文件')
    return
  }
  // 提交请求
  uploadHeaders.value = {
    Authorization: 'Bearer ' + getAccessToken(),
    'tenant-id': getTenantId(),
    'Chinese-Ship-Name': chineseShipName.value,
    'Ship-Voyage': shipVoyage.value
  }
  formLoading.value = true
  uploadRef.value!.submit()
}

3.3 更新子表单数据

对应的方法数据如下：

html按钮

<el-button
  type="info"
  plain
  @click="handleRefresh(formData.id)"
  v-hasPermi="['dangerous:appointment-commission:enterSiteRefresh']"
>
  <Icon icon="ep:refresh" class="mr-5px" /> 刷新重置
</el-button>

对应的按钮方法如下：

/** 刷新 */
const handleRefresh = async (id) => {
  formLoading.value = true;
  try {
    const fileData = await AppointmentCommissionApi.getEnterSiteListByAppointmentId(id);
    console.log(fileData);

    // 更新子表单的数据
    if (enterSiteFormRef.value) {
      enterSiteFormRef.value.setData(fileData);
    }
  } catch (error) {
    console.error('Failed to fetch data:', error);
  } finally {
    formLoading.value = false;
  }
}

通过另外一个文件的刷新来暴露

<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="formRules"
    v-loading="formLoading"
    label-width="0px"
    :inline-message="true"
  >
    <el-table :data="formData" class="-mt-10px">
      <el-table-column label="序号" type="index" width="100" />
      <el-table-column label="提单号" min-width="150">
        <template #default="{ row, $index }">
          <el-form-item :prop="`${$index}.billNumber`" :rules="formRules.billNumber" class="mb-0px!">
            <el-input v-model="row.billNumber" :disabled="formType === 'detail'" placeholder="请输入提单号" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="箱号" min-width="150">
        <template #default="{ row, $index }">
          <el-form-item :prop="`${$index}.boxNumber`" :rules="formRules.boxNumber" class="mb-0px!">
            <el-input v-model="row.boxNumber" :disabled="formType === 'detail'" placeholder="请输入箱号" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="尺寸" min-width="150">
        <template #default="{ row, $index }">
          <el-form-item :prop="`${$index}.boxSize`" :rules="formRules.boxSize" class="mb-0px!">
            <el-input v-model="row.boxSize" :disabled="formType === 'detail'" placeholder="请输入尺寸" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="箱型" min-width="150">
        <template #default="{ row, $index }">
          <el-form-item :prop="`${$index}.boxType`" :rules="formRules.boxType" class="mb-0px!">
            <el-input v-model="row.boxType" :disabled="formType === 'detail'" placeholder="请输入箱型" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="货名" min-width="150">
        <template #default="{ row, $index }">
          <el-form-item :prop="`${$index}.productName`" :rules="formRules.productName" class="mb-0px!">
            <el-input v-model="row.productName" :disabled="formType === 'detail'" placeholder="请输入货名" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="危险品等级" min-width="150">
        <template #default="{ row, $index }">
          <el-form-item :prop="`${$index}.hazardousLevel`" :rules="formRules.hazardousLevel" class="mb-0px!">
            <el-input v-model="row.hazardousLevel" :disabled="formType === 'detail'" placeholder="请输入危险品等级" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="危规号" min-width="150">
        <template #default="{ row, $index }">
          <el-form-item :prop="`${$index}.hazardCode`" :rules="formRules.hazardCode" class="mb-0px!">
            <el-input v-model="row.hazardCode" :disabled="formType === 'detail'" placeholder="请输入危规号" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="60" v-if="formType !== 'detail'">
        <template #default="{ $index }">
          <el-button @click="handleDelete($index)" link type="primary" v-if="formType !== 'detail'">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
  <el-row justify="center" class="mt-3">
    <el-button @click="handleAdd" round v-if="formType !== 'detail'">+ 添加危险品</el-button>
  </el-row>
</template>

<script setup lang="ts">
import { AppointmentCommissionApi } from '@/api/dangerous/appointmentcommission'

const props = defineProps<{
  appointmentId: undefined, // 预约编号（主表的关联字段）
  formType: string
}>()
const formLoading = ref(false) // 表单的加载中

const formData = ref([]) // 表单数据
const formRules = reactive({
  // 表单验证规则
  billNumber: [{ required: true, message: '请输入提单号', trigger: 'blur' }],
  boxNumber: [{ required: true, message: '请输入箱号', trigger: 'blur' }],
  boxSize: [{ required: true, message: '请输入尺寸', trigger: 'blur' }],
  boxType: [{ required: true, message: '请输入箱型', trigger: 'blur' }],
  productName: [{ required: true, message: '请输入货名', trigger: 'blur' }],
  hazardousLevel: [{ required: true, message: '请输入危险品等级', trigger: 'blur' }],
  hazardCode: [{ required: true, message: '请输入危规号', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref

/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
  () => props.appointmentId,
  async (val) => {
    // 1. 重置表单
    formData.value = []
    // 2. val 非空，则加载数据
    if (!val) {
      return;
    }
    try {
      formLoading.value = true
      formData.value = await AppointmentCommissionApi.getEnterSiteListByAppointmentId(val)
    } finally {
      formLoading.value = false
    }
  },
  { immediate: true }
)

/** 新增按钮操作 */
const handleAdd = () => {
  if (props.formType === 'detail') return // 禁用“添加危险品”按钮
  const row = {
    id: undefined,
    billNumber: '',
    boxNumber: '',
    boxSize: '',
    boxType: '',
    productName: '',
    hazardousLevel: '',
    hazardCode: '',
    appointmentId: props.appointmentId,
  }
  formData.value.push(row)
}

/** 删除按钮操作 */
const handleDelete = (index) => {
  if (props.formType === 'detail') return // 禁用“删除”按钮
  formData.value.splice(index, 1)
}

/** 表单校验 */
const validate = () => {
  return formRef.value.validate()
}

/** 表单值 */
const getData = () => {
  return formData.value
}

// 设置数据的方法
const setData = (newData) => {
  formData.value = newData;
};

defineExpose({ validate, getData, setData })
</script>
转载请注明出处或者链接地址：https://www.qianduange.cn//article/15655.html
标签
defineExpose父子组件
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

用JQueryUI库在.net MVC中配置datepicker(时间日期控件)

2024-08-21 22:08:09

JQuery 详细教程

2024-08-21 22:08:08

jQuery Mobile 高级教程（二）

2024-08-21 22:08:07

jQuery2 高级教程（八）

2024-08-21 22:08:06

【web前端期末/课程设计】中国体育网站(bootstrap4/jQuery/swiper)

2024-08-21 22:08:51

jQuery-LazyLoad-Any 开源项目安装与使用指南

2024-08-21 22:08:50

jQuery Spellchecker 使用教程

2024-08-21 22:08:50

Echarts图表官网打开太慢怎么办？echarts.apache.org

2024-08-21 22:08:45

【Java】 深入浅出Jackson与JSON的“Unrecognized field”问题解析

2024-08-21 22:08:38

PHP用CURL发送Content-type为application/json的POST请求方法

2024-08-21 22:08:37

大家推荐的文章
1

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
2

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
3

npm的使用

2024-08-18 00:08:131000
4

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
5

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
6

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
7

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
8

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
9

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
10

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！