Vue 使用js调用全局组件

在一些场景中，可能出现使用js调用全局组件的情况，例如iview的$Message$Modal等HTML弹框。如果想要自定义这种类型的的方法，应该怎样定义

需要使用的主要是 Vue.extend 这一个全局Api

自定义一个组件并且注册到全局 首先是两个文件index.vue 与 index.js.其中index.vue是自定义组件的内容
index.vue

	<template>
      <div>
        <p>自定义组件{{message}}</p>
      <div>
    <template>
    
    export default {
    	// 组件接受外部传参
    	props: {
        	message: {
            	type: String || Number,
                default: ''
            }
        },
        data() {
          return {}
        }
    }

index.js

	// 引入上文的index.vue;
	import index from 'index.js';
    const showMessage = {
    	install: (Vue) => {
          // 使用基础 Vue 构造器，创建一个“子类”。同时这个子类也是一个组件
          const showMessage = Vue.extend(index);
          let messageHtml;
          const init = () => {
            // 生成一个子类实例
          	messageHtml = new showMessage();
            // 将这个实例挂载Vue
  			// 并将Vue加入全局挂载点内部
            let messageBlock = messageHtml.$mount().$el;
            document.body.appendChild(messageBlock);
          }
          // 注意： 如果$tools被注册过了记得改名
          Vue.protoType.$tools = {
          	showMessage(message) {
              init();
              // 参数传递到组件内部
              messageHtml.message = message;
              return init;
            }
          }
        }
    }
    
    export default showMessage;

在全局main.js 引入注册。

	import showMessage from 'index.js';
    Vue.use(showMessage);

此时，在页面中调用 this.$tools.showMessage('message');