参考 https://juejin.im/post/5ca20e426fb9a05e42555d1d，这位大神写的是移动端常用的toast组件。
为啥用？
一般写组件，写完第一步的组件代码，直接在需要使用组件的地方import。
但是有些组件需要在各个地方都有使用，这时候频繁在各个页面引入就不大合适了。
怎么用？实操如下：
一、先写组件
<!-- toast.vue -->
<template>
<div>
<p>我是你的{{name}}组件呀</p>
</div>
</template>
<script>
export default {
name: "toast",
data(){
return{
name:'默认'
}
},
mounted() {
setTimeout(() => {
// 移除组件的方法
this.$destroy(true);//销毁组件
this.$el.parentNode.removeChild(this.$el);//在父元素中移除dom元素
}, 3000);
},
}
</script>
<style lang="scss" scoped>
</style>
跟平时写组件代码一样
二、同目录下写个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中的数据。
