VUE 2.x中全局组件的封装（三）

Vue.extend 属于 Vue 的全局 API，在实际业务开发中我们很少使用，因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中，Vue.extend + $mount 这对组合是我们需要去关注的。
用法：
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

为什么使用 extend

在 vue 项目中，我们有了初始化的根实例后，所有页面基本上都是通过 router 来管理，组件也是通过 import 来进行局部注册，所以组件的创建我们不需要去关注，相比 extend 要更省心一点点。但是这样做会有几个缺点：

组件模板都是事先定义好的，如果我要从接口动态渲染组件怎么办？
所有内容都是在 #app 下渲染，注册组件都是在当前位置渲染。如果我要实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它，该怎么办？

这时候，Vue.extend + vm.$mount 组合就派上用场了。

一个简单示例-hello world

index.vue

跟他同级目录的 index.js

import Vue from "vue";
import helloWorld from "./index.vue";
const HelloWorldConstructor = Vue.extend(helloWorld);

const Hello = option => {
  const HelloWorldInstance = new HelloWorldConstructor({
    data: {
      content: option.content
    },
    // 传props 值必须用 propsData
    propsData: {
      text: option.text
    }
  }); // 实例化一个带有content内容的Notice
  // 设置 data 中的值也可以这样直接写
  HelloWorldInstance.isShow = option.isShow;
  HelloWorldInstance.$mount(); // 挂载但是并未插入dom，是一个完整的Vue实例
  let helloDom = HelloWorldInstance.$el;
  document.body.appendChild(helloDom); // 将dom插入body
  // 一
  // return HelloWorldInstance;
  // 二
  return () => {
    HelloWorldInstance.$el.parentNode.removeChild(HelloWorldInstance.$el);
  };
};

export default {
  install: Vue => {
    Vue.prototype.$hello = Hello;
  }
};

main.js中注入

import Hello from "@/components/global/Hello"; //这个是 index.js
Vue.use(Hello); // 使用全局组件 Hello

使用--在test.vue中

Vue.extend 自定义插件形式全局弹窗提示组件

来个升级版，写个类似alert的组件
notice.vue

跟notice.vue同级目录的 index.js

import Vue from "vue";
const NoticeConstructor = Vue.extend(require("./notice.vue").default);

let nId = 1;
// 为了同时兼容单独引入此组件的情况,加 export ，可以单独导出
export const Notice = (option = { message: "提交成功！", type: "success" }) => {
  const NoticeInstance = new NoticeConstructor({
    data: {
      content: option.message,
      type: option.type
    }
  }); // 实例化一个带有content内容的Notice
  NoticeInstance.visible = true;
  NoticeInstance.id = "notice-" + nId++;
  NoticeInstance.$mount(); // 挂载但是并未插入dom，是一个完整的Vue实例
  NoticeInstance.$el.style.zIndex = nId + 10000;
  document.body.appendChild(NoticeInstance.$el); // 将dom插入body
  return NoticeInstance;
};
// 全局组件挂载所用，对应 Vue.use()
export default {
  install: Vue => {
    Vue.prototype.$notice = Notice;
  }
};