vue 中挂载一个全局组件，用组件构造器

最新推荐文章于 2024-06-25 09:04:20 发布

小小小菜鸡zzzz

最新推荐文章于 2024-06-25 09:04:20 发布

阅读量855

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/ojb98K/article/details/107992049

版权

本文介绍如何在Vue应用中通过组件构造器挂载一个全局组件，包括在index.js、main.js和Toast.js文件中的配置和使用，从而实现特定的显示效果。

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

效果

在这里插入图片描述

index.js

import Toast from "./Toast";

const obj = {
   }

obj.install = function (Vue) {
   

  // 1.创建组件构造器
  const toastContrustor = Vue.extend(Toast)

  // 2.new的方式，根据组件构造器，可以创建出来一个自建对象
  const toast = new toastContrustor()

  // 3.将组件对象，手动挂载到某一个元素上
  toast.$mount(document.createElement('div'))

  // 4.toast.$el 对应的就是div
  document.body.appendChild(toast.$el)

  // 5.挂载到Vue实例上，可以通过 this.$toast 访问属性，方法
  Vue.prototype.$toast = toast