本次封装的组件以toast组件为例

以前使用移动端ui插件时，通过一句代码比如

$.toast( ‘ 需要显示的内容 ' )

现在我们也尝试自己封装toast组件。

准备工作：vue-cli脚手架工程

先看一下涉及到的文件目录截图：

这次的封装主要涉及的文件是Toast.vue toast.js Hello.vue，主要思路如下：

① Toast.vue是我们要使用的toast组件；

② toast.js里面用

Vue.extend()

最后在toast.js里面导出函数myToast，函数myToast里面的逻辑在代码里面有解释；

③ Hello.vue里调用函数，显示组件。

Toast.vue代码：