vue实现用函数的方式调用组件

背景

平时项目中用到的消息弹窗提示也是别人封装好的，于是自己也想写一个用函数的方式调用组件的小demo，功能类似于elementUI的this.$message()，用vue2实现

实现

第一步，新建一个vue项目，看一下我的项目目录

 

在message 的index.vue下写一个弹窗组件

<template>
  <div class="box">
    <div :class="['box-main ', { active: isShow }]">{{ info }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: "",
      isShow: false,
    };
  },
  mounted() {
    setTimeout(() => {
      this.isShow = true;
    }, 2000);  
  },
  methods: {},
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
}
.box-main {
  width: 150px;
  min-height: 50px;
  background: #ccc;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.active {
  transition: all 1s;
  opacity: 0;
}
</style>

在message 的index.js 写下如下代码 

import Vue from 'vue'
import Message from './index.vue'

let MessageConstructor = Vue.extend(Message)
let instance
const MessageTip = function(options = {}) {
    instance = new MessageConstructor({
        data: options
    })
    document.body.appendChild(instance.$mount().$el) //this.$el拿到组件实际上的dom，把他挂载到body上
    setTimeout(() => {
        document.body.removeChild(instance.$mount().$el) 
    }, 3000);  //3秒之后自动移除dom组件

}

export default MessageTip

通过Vue.extend来创建一个Vue的子类，传入一个组件对象，然后通过new来创建组件实例，new的时候可以传入组件的属性，比如data、methods、生命周期函数等等，它会和组件内定义的属性结合，而不会直接覆盖该属性。

 

在mian.js中，在vue的原型上添加$MessageTip 方法，将组件赋值给这个方法

import MessageTip from '@/page/message/index.js'
Vue.prototype.$MessageTip = MessageTip

然后就可以在全局中通过this.$MessageTip()来调用，例如我在组件message上调用这个弹窗组件