然后在页面中测试一下，就像下面这样子：
运行一下代码：
嗯，挺好，小有成就的 feel 👏👏👏。
支持可传参数
别急，我们好像还漏了点什么🤔。。。对了，现在还不支持传参呢，直接调用 this.$toast() 就只能显示————服务器错误，请稍后重试（这下全都是后端的锅了😊）。但我们可是个有追求的前端，不能局限于此，所以现在让我们来尝试增加下两个可配置参数，这里拿 duration 和 content 举个栗子🌰。
首先我们要修改 main.vue 组件里面的内容（其实没啥大变化），就像下面这样：
<!-- main.vue 可配置版 -->
<template>
<div class="toast">
<p>{{ content }}</p>
</div>
</template><script>
// 主要就改了 data
export default {
name: "Toast",
data() {
return {
content: "",
duration: 3000
};
},
mounted() {
setTimeout(() => {
this.$el.parentNode.removeChild(this.$el);
}, this.duration);
}
};
</script>
上面的代码应该算是浅显易懂了，接下来我们看下 main.js 里面改了啥：
// main.js 可配置版
import Vue from "vue";
import Main from "./main.vue";let ToastConstructor = Vue.extend(Main);
let instance;
const Toast = function(options = {}) { // 就改了这里，加了个 options 参数
instance = new ToastConstructor({
data: options // 这里的 data 会传到 main.vue 组件中的 data 中，当然也可以写在 props 里
});
document.body.appendChild(instance.$mount().$el);
};
export default Toast;
其实 main.js 也没多大变化，就是在函数里面加了个参数。要注意的是 new ToastConstructor({ data: options }) 中的 data 就是 main.vue 组件中的 data，不是随随便便取的字段名，传入的 options 会和组件中的 data 合并（Vue 的功劳）。
em。。。是的，就这么简单，现在让我们继续来调用一下它：
<script>
export default {
methods: {
showToast() {
this.$toast({
content: "哈哈哈哈，消失的贼快",
duration: 500
});
}
}
};
</script>运行一下就可以看到：
当然，这还没完，我们继续添加个小功能点🙄。。。
