Vue.extend()实现this.$toast()

参考 https://juejin.im/post/5ca20e426fb9a05e42555d1d，这位大神写的是移动端常用的toast组件。

为啥用？
一般写组件，写完第一步的组件代码，直接在需要使用组件的地方import。
但是有些组件需要在各个地方都有使用，这时候频繁在各个页面引入就不大合适了。

怎么用？实操如下：

一、先写组件

跟平时写组件代码一样

二、同目录下写个js

// toast.js
import Vue from "vue"; // 引入 Vue 是因为要用到 Vue.extend() 这个方法
import toast from "./toast.vue"; // 引入组件

let toastConstructor = Vue.extend(toast);  //创建构造器
let instance;
const Toast = function (options = {}) {
    instance = new toastConstructor ({
       data: options
    }).$mount(); // 创建实例
    document.body.appendChild(instance.$el); // 将元素挂载到 body 下
};
export default Toast;

暴露一个函数Toast

三、main.js引入

import Toast from './components/toast/Toast.js'
Vue.prototype.$toast= Toast;

在main.js引入，并在原型上定义（这个用法很普遍，一些 依赖于Vue/有使用install 的组件代码可以用vue.use()使用，但是其他的js，需要用到Vue.prototype，将其加入vue原型，能够在项目中使用this.$name调用）

四、使用

this.$toast({
  name:'诶嘿搞定'
})

使用过程中发现，toast组件中，无法使用vuex的数据，但是可以传入vuex中的数据。