this.$toast() 了解一下？

前言

在平时的开发过程中，我们总是先写好一个组件，然后在需要的页面中用 import 引入即可，但如果是下面这种类型的组件呢?

上面这种类型的浮层提示有一个很大的特点，就是使用频率特别高，几乎每个页面都会用到它，于是乎我们就要在每个页面中去引入该组件，并且在每个页面都得通过一个变量来控制它的显隐，这显然不是我们想要的?。。。那我们想要的是什么样呢?？用过一些 UI 框架的同学们应该知道有这样一种用法：

this.$toast({
    duration: 3000,
    content: '这是一条消息提示'
});
复制代码

没错，就是这么简单的一句话就万事大吉了（就是用 js 调用组件而已啦?）。那这种效果究竟是怎么实现的呢？今天就让我们来（手把手? ）一探究竟吧！

前置知识

不知道小伙伴们有没有用过 Vue.extend() 这个东东，反正我是很少碰过，印象不深，所以这里我们先来短暂了解一下 Vue.extend() 主要是用来干嘛的。先来个官方说明（不多的，坚持下）：

没怎么看懂？?没关系，不重要，你只要记住（加少许理解）以下用法即可：

// 导入以往的普通组件
import Main from './main.vue';
// 用 Vue.extend 创建组件的模板（构造函数）
let mainConstructor = Vue.extend(Main);
// 实例化组件
let instance = new mainConstructor();
// 挂载到相应的元素上
instance.$mount('#app');
复制代码

不知道你看懂没有，上面的 Vue.extend(Main) 就是一个基于 main.vue 的组件模板（构造函数），instance 是实例化的组件，$mount() 是手动挂载的意思。其中 Vue.extend() 和 $mount() 就是我们通过 js 调用、渲染并挂载组件的精髓所在，相当于早前的 createElement 和 appendChild，有异曲同工之效。这个点需要我们好好熟悉一下，所以你可以先停下来屡屡思路?。
补充一下?：$mount() 里面如果没有参数，说明组件只是渲染了但还没有挂载到页面上，如果有正确的（元素）参数则直接挂载到元素下面。

写一个 toast 组件

js 调用归调用，最原始的组件还是要有的，只是我们不通过 import 来引入到页面中而已。ok，我们就以最开始的那个 toast 图片来简单写一下这个 vue 组件（message 和 alert 也是一样的）。这里就直接上代码啦，毕竟它的结构简单到爆了，也不是本章节的重点：

<!-- main.vue -->
<template>
  <div class="toast">
    <p>服务器错误，请稍后重试</p>
  </div>
</template>
<script>