Vue如何封装全局toast组件

本篇内容主要讲解"Vue如何封装全局toast组件"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"Vue如何封装全局toast组件"吧!

一. 借助 vue-cli

1. 定义 Toast 组件

// components/Toast

2. 在 main.js 里面配置

import Vue from "vue"import App from "./App.vue"import Toast from "./components/Toast"// 定义插件对象const ToastObj = {  install: function (Vue) {    // 创建一个Vue的"子类"组件    const ToastConstructor = Vue.extend(Toast)    // 创建一个该子类的实例,并挂载到一个元素上    const instance = new ToastConstructor()    console.log(instance)    // 将这个实例挂载到动态创建的元素上,并将元素添加到全局结构中    instance.$mount(document.createElement("div"))    document.body.appendChild(instance.$el)    // 在Vue的原型链上注册方法，控制组件    Vue.prototype.$toast = (msg, duration = 1500) => {      instance.message = msg      instance.visible = true      setTimeout(() => {        instance.visible = false      }, duration)    }  }}Vue.use(ToastObj)Vue.config.productionTip = falsenew Vue({  render: h => h(App),}).$mount("#app")

3. 在其他组件内使用

二、不借助 vue-cli

在借助 vue-cli 的情况下，可以方便实现组件的导入导出，但是在不借助构建工具的情况下，就需要使用其他方法了

1. 注册 toast 组件

到此，相信大家对"Vue如何封装全局toast组件"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！