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

置顶

W蘭

于 2024-07-11 09:58:06 发布

阅读量994

点赞数 4

CC 4.0 BY-SA版权

分类专栏：实际问题文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_51353891/article/details/140343134

本文将介绍如何在 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>