在vue中封装可复用的组件方法

toast.js修改后的代码如下：

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; 

那么，现在我们在Hello.vue中调用的时候就应该是这样了：this.$toast(‘新内容’，2000)；我们的组toast组件可以正常使用了！

以上这篇在vue中封装可复用的组件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。