1、在src》components》创建文件夹my-button(用来存放组件和插件)》创建文件button.vue(用来存放my-button组件)》
（1）在模板中，创建一个带有默认插槽值的button按钮
<button class="btn"><slot>按钮</slot></button>
（2）默认导出一个组件名，值为“my-button”
export default{ name:'my-button' }
（3）给模板中的按钮设置样式
.btn{ padding: 3px 15px; border: 0 none; outline: none; background-color: #FF0000; font-size:14px; color: #FFFFFF; }
2、在src》components》my-button》创建文件index.js(用来存放my-button插件)》
（1）导入my-button组件
import MyButton from "./button"
（2）在默认导出的方法中，全局注册导入的组件。
export default{ install(Vue){ Vue.component("my-button",MyButton); } }
3、在src》App.vue》
（1）导入Vue组件
import Vue from "vue"
（2）导入插件
import MyButton from "./components/my-button"
（3）启用插件
Vue.use(MyButton);
（4）在模板中引用插件
<my-button @click="submit()">提交</my-button>
【npm run serve】
4、在src》components》my-button》button.vue》
（1）在模板中，给button按钮添加click事件。
@click="handleClick()"
（2）在click事件的处理函数中，传递一个click事件的别名（click）给父组件：this.$emit("click")。
methods:{ handleClick(){ this.$emit("click")
}
5、在src》App.vue》
（1）在模板中，给插件设置（别名）事件。
<my-button @click="submit()">提交</my-button>
（2）在methods对象中，在（别名）事件的处理函数中,做逻辑》
调用Vue实例的toast方法（该方法是在后续插件中定义的），传入一个对象（自己模拟数据创建出来的对象）。
{
message:"请输入姓名",
duration:3000,
onClose:()=>{
console.log("已关闭");
}
}
methods:{ submit(){ this.$toast({ //出现this.$XXX的形式，说明XXX是挂载在原型链上的一个自定义方法或者自定义属性。 message:"请输入姓名",//出现的属性，说明自定义方法会把它赋值给vm实例对应的属性中 duration:3000, onClose:()=>{ //出现这种方法，说明自定义方法XXX需要设置一个时间延迟函数，来调用这个方法。 console.log("已关闭"); } }) } }
【npm run serve】
--------------------------------------------------------------------------------------------------
总结：toast插件的开发，
1、在App.vue中，（在某个事件处理函数中）调用一个（后续在toast插件会自定义的）vue实例方法，
并且给该实例方法传递一个对象字面量（模拟多组自己想要的key和value）。
2、在toast插件中，在Vue的原型链上创建一个自定义方法（供App.vue调用）。
3、在toast插件中，手动创建标签挂载到vue组件上，创建出vue组件实例vm。
4、把创建的标签，追加到页面上。
5、在自定义方法中，把调用这个方法时传进来的参数对象，一一赋值给实例vm对应属性上。
6、设置时间延迟函数，在回调函数中，把创建的标签，从页面上删除。
--------------------------------------------------------------------------------------------------
1、在src》components》创建文件夹my-toast(用来存放组件和插件)》创建文件toast.vue(用来存放组件)》
（1）在模板中，创建标签元素
<div class="toast-wrap"></div>
（2）默认导出一个组件名，值为“my-toast“
export default{ name:'my-toast' }
（3）设置标签样式
.toast-wrap{ padding: 8px 15px; background-color: rgba(0,0,0,0.8); font-size: 14px; color:#FFFFFF; text-align: center; position: fixed; z-index: 99; left:50%; top:50%; transform: translate(-50%,-50%); border-radius: 5px; }
【在src》App.vue》注册组件，引用组件，npm run serve 测试组件是否有效。】
2、在src》components》my-toast》创建文件index.js(用来存放插件)》
（1）导入my-toast组件
import MyToast from "./toast"
（2）在默认导出的方法中，全局extend导入的组件：let VueComp = Vue.extend(MyToast);
export default { install(Vue) { let VueComp = Vue.extend(MyToast); //(3)... } }
/*ƒ VueComponent (options) { //返回一个组件对象的初始化方法或构造方法。
this._init(options);
}*/
（3）在默认导出的方法中，在Vue的原型链上创建一个toast方法，有参数opts，在方法中打印出参数：Vue.prototype.$toast = function (opts) {...}
Vue.prototype.$toast = function (opts) { //4(1)(2)...
}
3、在src》App.vue》
（1）导入Vue组件
（2）导入插件
（3）启用插件
（4）在模板中引用插件
【npm run serve，点击按钮，查看控制台是否打印出自己的模拟数据】
4、在src》components》my-toast》index.js》
（1）在toast方法中，动态创建一个标签元素挂载到组件实例上：let vm = new VueComp().$mount(document.createElement("div"));
/*VueComponent {_uid: 7, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
vm.$el: div.toast-wrap*/
let vm = new VueComp().$mount(document.createElement("div"));//创建一个标签元素挂载组件。 console.log(vm);
（2）在toast方法中，把创建的标签，追加到页面上：document.body.appendChild(vm.$el);
document.body.appendChild(vm.$el);
【npm run serve，点击按钮，出现提示框】
5、在src》components》my-toast》toast.vue》
（1）在模板中做动态数据：{{message}}
<div class="toast-wrap">{{message}}</div>
（2）在data数据对象中，添加：message:""
data(){ return{ message:"" } }
【npm run serve，点击按钮，出现空白提示框】
/*VueComponent {_uid: 7, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
vm.message:""*/
6、在src》components》my-toast》index.js》
（1）在toast方法中，把参数opts对象里面的属性值赋值给组件实例vm：
vm.message=opts.message; let duration=opts.duration||2000; setTimeout(()=>{ document.body.removeChild(vm.$el); if(opts.onClose){ opts.onClose(); } },duration)
（2）解决重复点击出现提示框问题：
let isToast=false; if(!isToast){ isToast=true; //... isToast=false; }
src》components》my-toast》toast.vue》代码
View Codesrc》components》my-toast》index.js》代码
import MyToast from "./toast" //2(1) export default { install(Vue) { let VueComp = Vue.extend(MyToast); //2(2) let isToast=false; //6(2) Vue.prototype.$toast = function (opts) { //2(3)供App.vue调用 if(!isToast){ //6(2) isToast=true; //6(2) console.log(opts); let vm = new VueComp().$mount(document.createElement("div"));//4(1)创建出vue组件实例vm console.log(vm); document.body.appendChild(vm.$el);//4(2)把创建的标签，追加到页面上 vm.message=opts.message;//6(1)赋值给实例vm对应属性 let duration=opts.duration||2000; setTimeout(()=>{ //设置时间延迟函数 isToast=false; //6(2) document.body.removeChild(vm.$el);//把创建的标签，从页面上删除。 if(opts.onClose){ opts.onClose(); } },duration) } } } }