VUE中寫公共組件類似於Toast點擊觸發的

第一步在components裏面建立toast文件夾裏面包含兩個文件 一個toast.vue 一個index.js

第二部在js中引入vue 在引入當前創建的toast.vue文件  在定義一個constructoe = Vue.extend() 實例構造器

import Vue from 'vue'
import Main from './toast'
let ToastConstructor = Vue.extend(Main)

定義常量 並傳入參數 在導出常量

const Toast =  (options) => {
  //這裏是內容
    ....
}

export default Toast

重點來了

先要new一下Vue.extend出來的構造器讓其生成實例

let instance = new ToastConstructor({
    data: options// 重置該實例的data數據 也就是toastVue裏面的data數值
  })

掛載

let toastVm = instance.$mount()

添加到頁面上

document.body.appendChild(toastVm.$el)

toast.js的完整代碼

import Vue from 'vue'
import Main from './toast'
let ToastConstructor = Vue.extend(Main)

const Toast =  (options) => {
  options = options || {}
  if (typeof options === 'string') {
    options = {
      message: options
    }
  }
  let instance = new ToastConstructor({
    data: options
  })
  let toastVm = instance.$mount()
  document.body.appendChild(toastVm.$el)
}

export default Toast

最後調用在main.js裏面

//Vue.use(Toast)//use是直接執行
Vue.prototype.$Toast = Toast

在頁面中使用直接調用即可

this.$Toast('我是toast')

其中有一個小插曲就是一直在報錯’template or render function not defined.‘ 開始的時候一直在查找js 也定位了 就是mount的時候報的錯。最後發現是在vue頁面不小心加了一行亂七八糟的代碼，以此爲紀，讓自己長記性不要老想當然😭