Vue3，使用 JS 调用弹窗组件，并实现关闭弹窗组件时销毁组件

需要对一个弹窗组件进行改造，使其能用 JS 调用，并实现关闭弹窗组件时销毁组件

原始弹窗组件 Popup.vue

<template>
  <van-overlay :show="visible" >
    <div class="overlay-wrapper">
      <div class="container">
        <div class="content-container">
          <i class="icon-sad"></i>
          <p class="content">{{ message }}</p>
          <div class="btn btn-know" @click="onClose"></div>
        </div>
        <div class="btn-close" @click="onClose"></div>
      </div>
    </div>
  </van-overlay>
</template>

<script setup>
const props = defineProps({
  visible: {
    type: Boolean,
    default: true,
  },
  message: {
    type: String,
    default: '',
  }
})

const emit = defineEmits(['update:visible'])

const onClose = () => {
  emit('update:visible', false)
}

</script>

这个组件默认页面中调用，改成 JS 调用则需要用到 createVNode 方式

新增 popup.js文件

import { render, createVNode } from 'vue'
import Popup from './Popup.vue'

export default function (options = {}) {
  const { visible = true, message } = options
  const mountNode = document.createElement('div')

  // 销毁组件
  const destroy = () => {
    render(null, mountNode)
    document.body.removeChild(mountNode)
  }

  const app = createVNode(Popup, {
    visible,
    message,
    onDestroy: destroy,
  })

  render(app, mountNode)
  document.body.appendChild(mountNode)
}

同时需要对原来组件进行修改，实现关闭的时候销毁组件

Popup.vue

<script setup>
const props = defineProps({
  ...
  onDestroy: Function,
})

const onClose = () => {
  emit('update:visible', false)

  // js 调用的时候，可以传入一个回调函数，用于销毁组件
  if (props.onDestroy) {
    props.onDestroy()
  }
}
</script>

使用 JS 调用

import Popup from '@/components/popup'

Popup({ message: '这是 JS 调用的组件' })

默认的组件中调用

<template>
  <Popup v-model:visible="show" :message="message"/>
</template>

<script setup>
import Popup from '@/components/Popup.vue'

const show = ref(false)
const message = ref('这是组件中使用')
</script>