Vue可以通过全局注册来实现全局组件的功能，比如有这么一个组件exampleComponent，如果想把它注册成全局组件的话，只需要在引入Vue的文件里调用Vue.component('example-component',exampleComponent)来实现，又或者如同大部分Vue的ui框架那样，直接调用Vue.use(/* 组件 */)来实现。
Vue.use()方法比Vue.component()要复杂些，其大致用法如下：
- 比如有这么一个
exampleComponent.vue文件，内容如下:
<template>
<p>{{msg}}</p>
</template>
<script>
export default {
data(){
return {
msg: '啊，我是一个自定义组件！'
}
}
}
</script>
- 同级创建一个比如
index.js文件，内容如下：
import exampleComponent from './exampleComponent.vue';
const example = {
install(Vue){
Vue.component('example-component',exampleComponent);
}
}
export default example;
- 在有引入
Vue的地方引入这个index.js文件，如import example from '../exampleComponent/index.js'，接着Vue.use(example)即可全局使用此组件。这种方法看着与直接使用Vue.component()相比好像有些多此一举，但存在即合理，通过一个单独的js层封装，它可以被合并到一个大对象里面，作为其中一个属性，就像大部分的ui框架，你若想单独引用框架里的某个组件，基本都是先import { example } from 'exampleUI'然后再Vue.use(example)来实现按需注册的，这种做法可以让你不必去找一个一个组件的路径，而只需要记住合并组件的那个大对象所在路径即可方便引用。
这两种全局注册组件的方法在注册成功后都是通过使用标签名如<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.extend( options )
-
参数：
{Object} options -
用法：
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
data选项是特例，需要注意 - 在Vue.extend()中它必须是函数
结果如下：<div id="mount-point"></div> // 创建构造器 var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } } }) // 创建 Profile 实例，并挂载到一个元素上。 new Profile().$mount('#mount-point')<p>Walter White aka Heisenberg</p>
vm.$mount( [elementOrSelector] )
-
参数：
{Element | string} [elementOrSelector]{boolean} [hydrating]
-
返回值：
vm- 实例自身 -
用法：
如果Vue实例在实例化时没有收到el选项，则它处于“未挂载”状态，没有关联的DOM元素。可以使用vm.$mount()手动地挂载一个未挂载的实例。
如果没有提供elementOrSelector参数，模板将被渲染为文档之外的的元素，并且你必须使用原生DOM API把它插入文档中。
这个方法返回实例自身，因而可以链式调用其它实例方法。 -
示例：
var MyComponent = Vue.extend({ template: '<div>Hello!</div>' }) // 创建并挂载到 #app (会替换 #app) new MyComponent().$mount('#app') // 同上 new MyComponent({ el: '#app' }) // 或者，在文档之外渲染并且随后挂载 var component = new MyComponent().$mount() document.getElementById('app').appendChild(component.$el)
上面两个东西，简单理解就是用Vue自身的方法定义一个html标签，然后又用Vue的方法找到某个特定id的标签，将其内容替换掉。
那么用这两个特性，我们来创建一个能够自定义入参内容的fullName组件，它的功能是调用时，页面出现一个半透明遮罩层，页面中间显示入参内容。
步骤如下：
- 在
components文件夹下新建fullName文件夹，新建index.vue文件。
<template>
<div class='fullName'>
<p>您好，{{firstName + lastName}}</p>
</div>
</template>
<script>
export default {
props: {
firstName: String,
lastName: String,
},
mounted(){
this.$nextTick(() => {
// 1s后消失
setTimeout(() => {
this.$destroy();
document.body.removeChild(this.$el);
},1000);
})
}
}
</script>
<style scoped>
.fullName{
position:fixed;
width:100%;
height:100%;
background:rgba(0,0,0,0.1);
display:inline-flex;
justify-content: center;
align-items: center;
z-index: 99;
top: 0;
left: 0;
}
</style>
-
fullName下新建index.js文件。
import fullNameVue from './index.vue'
const FullName = {};
FullName.install = function (Vue, option) {
const FullNameInstance = Vue.extend(fullNameVue);
let name;
const initInstance = () => {
name = new FullNameInstance();
let nameSpan = name.$mount().$el;
document.body.appendChild(nameSpan);
}
Vue.prototype.$fullName = {
showName(option){
initInstance();
if(typeof option === 'string'){
name.firstName = option;
}else if(typeof option === 'object'){
Object.assign(name, option);
}
return initInstance;
}
};
}
export default FullName;
- 在具体的业务代码逻辑出调用
this.$fullName.showName({first:'张',lastName:'五'})会发现body下被插入一个class为fullName的div，页面上有个透明遮罩层，中间显示内容为“您好，张五”，1s后消失，从html中也移除了，再次点击可以复现此效果，说明这个组件顺利完成。
网友评论