關(guān)于vue extend

// toast.vue
<template>
  <div class="fire-toast" v-show="visible">
    <p class="fire-toast-text">{{message}}</p>
  </div>
</template>

// index.js 
import Vue from 'vue'
const ToastContructor = Vue.extend(require('./src/Toast.vue'))

const Toast = content => {
  // 生成一個(gè)實(shí)例
  const ToastInstance = new ToastContructor({
    data: {
      content: content
    }
  })
  // 組件掛載到dom元素上
  ToastInstance.vm = ToastInstance.$mount()
  ToastInstance.vm.visible = true
  document.body.appendChild(ToastInstance.vm.$el)
  return ToastInstance.vm
}

export default Toast

// main.js
import Toast from '../packages/toast'
Vue.prototype.$toast = Toast

在使用過(guò)成中直接調(diào)用this.$toast('測(cè)試')， 結(jié)果vue報(bào)錯(cuò)如下圖， 請(qǐng)問(wèn)哪里寫(xiě)錯(cuò)了？