Vue3.0 + element Plus implementation page introduces pop-up window components and defineExpose usage

1. Introduce the pop-up window component (index.html) you wrote on the page that needs pop-up window display 

<template>
<!--按钮用来触发弹窗-->
 <el-button
     type="primary"
     plain
     @click="onProcess()"
     :icon="View"
  >更新进度</el-button>
  <teleport to="body">
    <!-- 弹窗组件，ref一定要写 -->
    <sync-process-dialog
      :data="syncProcess"
      ref="processDailogRef"  
    ></sync-process-dialog>
  </teleport>
</template>

2. Set the value of ref in the js file and trigger the pop-up window through the button

<script lang="ts" setup>
import { ref } from "vue";
import { View } from "@element-plus/icons";

const processDailogRef = ref();

//查看一键更新进度
//onChangeVisable()为子组件中通过defineExpose暴露出来的
const onProcess = () => {
  processDailogRef.value.onChangeVisable();
};

</script>

3. Accept the value passed from the parent component in the child component, and display the pop-up window (the parent component obtains the instance of the current component through the template ref, SyncProcessDialog.vue)

<!--当前文件为子组件即父组件引入的，SyncProcessDialog.vue-->
<template>
  <el-dialog
    v-model="dialogFormVisible"
    :close-on-click-modal="false"
    title="更新进度"
    width="850px"
  >
   <div>弹窗内容</div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";

//这里是接受父组件传递的值
const props = withDefaults(
  defineProps<{
    data: object;
  }>(),
  {}
);

const dialogFormVisible = ref(false);
const onChangeVisable = () => {
  dialogFormVisible.value = true;
};

defineExpose({ onChangeVisable });
</script>

Show results: