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

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

创建 Toast 组件

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

javascript 复制代码
<!-- 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 实例,并在页面上显示一段时间后移除。

javascript 复制代码
// 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 函数,并传入适当的参数。

javascript 复制代码
import createToast from './toast.js'

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

总结

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

优点

  • 解耦合:动态创建组件实例,使得组件的使用更加灵活,不需要在模板中预先定义。
  • 减少 DOM 操作:动态创建和销毁组件实例,可以减少对 DOM 的直接操作,提升性能。
  • 易于维护:所有与 Toast 相关的逻辑集中在一个地方,易于维护和修改。通过这种方式,我们可以轻松地在 Vue 3 应用中实现动态的 UI 元素,提升用户体验。
相关推荐
rzl023 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang4 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景6 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼7 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿8 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再11 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55515 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录20 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000021 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl22 分钟前
深度剖析Kafka读写机制
前端