总结vue2和vue3挂载自定义组件

一、vue2

1. 新建一个loading.vue文件并书写逻辑样式

2. 在同级目录新建index.js文件

import Vue from "vue";
import loading from "./loading.vue";

export default function DLoading (options) {
  const loadingConstructor = Vue.extend(loading) // 返回一个“扩展实例构造器”。
  const instance = new loadingConstructor({ // 实例化vue实例
    el: document.createElement('div'), // 将实例挂载在创建的div上
    data: options // 将传入组件的值，赋值给实例的data
  })
  document.body.appendChild(instance.$el) // 把创建的div添加到body中
  DLoading['close'] = function () {
    instance.$destroy() // 销毁实例
    document.body.removeChild(instance.$el) // 删除创建的div
  }
  return instance
}

 3. 在需要使用的地方引入

import DLoading from './components/DLoading';

...

mounted() {
  DLoading({ title: '获取中。。。' })
  setTimeout(() => {
    DLoading.close()
  }, 2000);
},

二、vue3

1. 新建一个loading.vue文件并书写组件逻辑样式

2. 在同级目录下新建index.js

import { createApp } from "vue";
import loading from "./loading.vue";

export default function DLoading (options) {
  const mountNode = document.createElement('div')
  document.body.appendChild(mountNode)
  const app = createApp(loading, {
    ...options
  })
  // 调用close方法销毁组件
  DLoading['close'] = function () {
    app.unmount()
    document.body.removeChild(mountNode)
  }
  return app.mount(mountNode)
}

3. 在需要使用的地方引入

import DLoading from "@/components/DLoading/index";


DLoading({title: '上传中'})
setTimeout(() => {
  DLoading.close()
}, 2000);