vue创建自定义组件

Toast.vue

index.js

import Toast from './Toast.vue'

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)

  Vue.prototype.$toast = toast
}
export default obj

main.js中安装组件

//安装toast组件
Vue.use(toast)

其他组件中调用toast组件

this.$toast.showMessage(res)

此笔记来自于coder why老师的vue教程里封装组件的课程，自己学习记录笔记