vue中如何编写可复用的组件

Ethanhuyi

于 2021-05-14 12:15:13 发布

阅读量847

点赞数 1

分类专栏： vue & node

本文链接：https://blog.csdn.net/will5451/article/details/116786223

版权

vue & node 专栏收录该内容

55 篇文章 4 订阅

订阅专栏

本文介绍了如何使用Vue.js动态创建和销毁组件，以实现一个toast提示功能。首先创建了一个名为egToast的组件页面，然后通过Vue.extend()扩展组件构造器并实例化，将toast组件挂载到新创建的div上，并将其添加到body中。接着，通过传入参数动态设置显示文字和显示时间，并在指定时间后自动隐藏组件。这个方法为应用提供了便捷的提示信息展示机制。

摘要由CSDN通过智能技术生成

①创建组件页面eg Toast.vue；
②用Vue.extend()扩展一个组件构造器,再通过实例化组件构造器,就可创造出可复用的组件
③将toast组件挂载到新创建的div上；
④把toast组件的dom添加到body里；
⑤修改优化达到动态控制页面显示文字跟显示时间；

import Vue from 'vue'; 
import Toast from '@/components/Toast';     //引入组件
let ToastConstructor  = Vue.extend(Toast) // 返回一个“扩展实例构造器”
 
let myToast = (text,duration)=>{
    let toastDom = new ToastConstructor({
        el:document.createElement('div')    //将toast组件挂载到新创建的div上
    })
    document.body.appendChild( toastDom.$el )   //把toast组件的dom添加到body里
    
    toastDom.text = text;
    toastDom.duration = duration;
 
    // 在指定 duration 之后让 toast消失
    setTimeout(()=>{
        toastDom.isShow = false;  
    }, toastDom.duration);
}
export default myToast;