使用Vue语法创建组件

直接放答案（在用例中，抽取 Vue创建组件的代码）

let Constructor = Vue.extend(Toast) 
let toast = new Constructor()  
toast.$mount() 
document.body.appendChild(toast.$el) 

用例

现在的需求：写一个 toast 组件，为方便用户，让用户使用语法this.$toast('这是弹出的消息')就可以使用toast组件。

需要使用到Vue的插件方法

1. 首先创建 plugin.js 文件。在该文件中创建一个写好的toast组件。

import Toast from './toast'

export default {
  install (Vue, options){
    Vue.prototype.$toast = function (message){
      let Constructor = Vue.extend(Toast) // Vue创建组件代码
      let toast = new Constructor()  // Vue创建组件代码
      toast.$slots.default = [message]
      toast.$mount() // Vue创建组件代码
      document.body.appendChild(toast.$el) // Vue创建组件代码
    }
  }
}

2. 在app.js文件中，通过全局方法 Vue.use() 使用插件

import plugin from "./plugin";
Vue.use(plugin)

3. 可以通过this.$toast('这是弹出的消息')语法使用toast组件了。