Vue 可以通过全局注册来实现全局组件的功能，比如有这么一个组件 exampleComponent ，如果想把它注册成全局组件的话，只需要在引入 Vue 的文件里调用 Vue.component('example-component',exampleComponent) 来实现，又或者如同大部分 Vue 的 ui框架 那样，直接调用 Vue.use(/* 组件 */) 来实现。
Vue.use() 方法比 Vue.component() 要复杂些，其大致用法如下：
这两种全局注册组件的方法在注册成功后都是通过使用标签名如 <example-component></example-component>来使用的。使用过 element 、 iview 等UI框架的朋友肯定会注意到这么一种比较特殊的组件，如 loading 和 message ，这类组件的使用场景大部分是在js执行环境时要用到，比如请求发送前要出现一个 loading 遮罩层防止用户重复请求，请求成功后这个遮罩层又要消失掉。这种需求若是也用预先在 html 中放置对应组件标签的形式的话，未免显得太过麻烦。所以，为了解决这个问题，有这么一种通过调用 Vue 原型方法来调用组件的方式。如 element 中 this.$message('这是一条消息提示')这样调用后在页面上显示一条消息提示的js方法。
不管什么组件，其本质都是操作DOM，只不过因为直接原生操作 DOM 会对浏览器的开销比较大， Vue 里面使用了一种虚拟dom的技术来尽可能的减少这种开销，而且操作dom虽然是一种很直观的改变显示效果的形式，但操作太过于繁琐。种种原因， Vue 的基本思想就是 数据驱动DOM ，尽量不要去亲手修改 DOM 。但凡事无绝对，上面所说的就是一种不操作 DOM 就难以绕开的一种便捷功能的实现。
那如何实现全局js方法调用组件的功能呢？
要实现这个目的，必须先了解两个东西： vm.$mount 、 Vue.extend() 。
翻看官方文档，找出了这两者的用法如下：
上面两个东西，简单理解就是用 Vue 自身的方法定义一个 html 标签，然后又用 Vue 的方法找到某个特定id的标签，将其内容替换掉。
那么用这两个特性，我们来创建一个能够自定义入参内容的 fullName 组件，它的功能是调用时，页面出现一个半透明遮罩层，页面中间显示入参内容。
步骤如下：
1、定义一个传入占位节点id的组件类
比如这里定义一个组件MyClass
function MyClass(id){//组件模板}
2、在组件内获取节点id
function MyClass(id){//组件模板var _self = document.getElementById(id)//根据id获取组件
}
3、定义类的方法
function MyClass(id){//组件模板var _self = document.getElementById(id)//根据id获取组件
this.addP=function(){//定义类方法，这里是显示内容为1233
_self.innerHTML ="1233"
}
}
4、直接在js中调用使用该组件方法
示例：
<body><div id='rrr'></div> 定义占位dom节点
</body>
<script>
var mc = new MyClass('rrr')//初始化组件
mc.addP()//组件调用方法
</script>
