Vue 3 中创建一个动态的组件实例

本文将介绍如何在 Vue 3 中实现一个动态 Toast 组件实例。我们将创建一个简单的 Toast 组件，并使用一个动态创建实例的脚本来显示 Toast 消息。在 Vue 3 中创建动态组件实例有许多好处，这些好处主要体现在灵活性、性能、可维护性和用户体验等方面。

创建 Toast 组件

首先，我们需要创建一个名为 Toast.vue 的组件。这个组件将接收两个 props：message 和 showToast，并根据 showToast 的值显示不同的图片。

<!-- Toast.vue -->
<template>
  <div class="custom-toast flex-col justify-c align-c">
    <img v-if="showToast" src="../../../public/img/toast1.png" alt="" />
    <img v-else src="../../../public/img/toast2.png" alt="" />
    <div class="message">{{ props.message }}</div>
  </div>
</template>

<script>
export default {
  name: 'Toast'
}
</script>

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

const props = defineProps({
  message: {
    type: String,
    default: '说话时间太短'
  },
  showToast: {
    type: Boolean,
    default: () => false
  }
})

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

<style scoped lang="scss">
.custom-toast {
  width: 420px;
  height: 452px;
  background: #01071e;
  border-radius: 32px;
  opacity: 0.9;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  img {
    // width: 224px;
    // height: 117px;
  }
  .message {
    margin-top: 50px;
    font-weight: 500;
    font-size: 42px;
    color: #f8fbff;
  }
}
</style>

动态创建 Toast 实例

接下来，我们将创建一个名为 toast.js 的文件，用于动态创建和显示 Toast 实例。这个脚本将导出一个 createToast 函数，该函数接收三个参数：message 和 showToast， duration 。它会创建一个新的 Toast 实例，并在页面上显示一段时间后移除。

// toast.js
import { createApp } from 'vue'
import Toast from './Toast.vue'

function createToast(message, showToast,duration = 1000) {
  const toastInstance = createApp(Toast, {
    message,
    showToast
  })
  const mountNode = document.createElement('div')
  document.body.appendChild(mountNode)
  toastInstance.mount(mountNode)

  setTimeout(() => {
    toastInstance.unmount(mountNode)
    document.body.removeChild(mountNode)
  }, duration )
}

export default createToast

使用动态 Toast 组件

要使用我们刚刚创建的动态 Toast 组件，只需要在需要显示 Toast 的地方调用 createToast 函数，并传入适当的参数。

import createToast from './toast.js'

// 显示 Toast 消息
createToast('这是一个 Toast 消息', true)

总结

• 通过上述步骤，我们在 Vue 3 中成功实现了一个动态 Toast
  组件实例。这个组件能够在运行时根据传入的参数显示不同的内容，并在一段时间后自动消失。这种动态组件实例的创建方式使得我们可以在应用中灵活地显示临时的
  UI 元素，而无需将它们预先定义在模板中。

优点

• 解耦合：动态创建组件实例，使得组件的使用更加灵活，不需要在模板中预先定义。
• 减少 DOM 操作：动态创建和销毁组件实例，可以减少对 DOM 的直接操作，提升性能。
• 易于维护：所有与 Toast 相关的逻辑集中在一个地方，易于维护和修改。通过这种方式，我们可以轻松地在 Vue 3 应用中实现动态的 UI 元素，提升用户体验。