VUE手动实现一个编程式组件

1.创建一个组件（用于编程式调用的)

<template>
  <div class='toast'
       v-show='isShow'>
    {{message}}
  </div>
</template>
<script>
export default {
  data () {
    return {
      message: '',
      isShow: false
    }
  },
  methods: {
    show (message, duration) {
      this.message = message
      this.isShow = true
      setTimeout(() => {
        this.isShow = false
        this.message = ''
      }, duration)
    }
  }
}
</script>
<style scoped>
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  padding: 8px 10px;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>

2.实现编程式

import Toast from './toast'
const obj = {}
obj.install = function (Vue) {
  // 创建构造器
  const ToastContrystor = Vue.extend(Toast)
  // new的方式 根据组件构造器，可以创建组件对象
  const toast = new ToastContrystor()
  // 手动挂载某一个元素上
  toast.$mount(document.createElement('div'))
  // toast.$el对应的就是div
  document.body.appendChild(toast.$el)
    //组件挂载到Vue原型上
  Vue.prototype.$toast = toast
}
export default obj

3.在main.js注册

import Vue from 'vue'
import toast from '@/components/common/toast/index.js'
Vue.use(toast)

4.使用

this.$toast.show('这不是一个错误',1000)