Vue.js
前言
现在前端开发中使用Vue的估计比较多，组件也是Vue比较核心的内容，也是我们平常开发中接触最多的东西了，那么什么是组件呢？组件可以是小到一个按钮，一个图标，也可以大到一个页面，甚至是一个系统。
最近接手了一个Vue的项目，可以说是学到了不少东西，当然也包括本篇说的“组件”，所以想着写下来分享一下。这篇文章不讲组件的基础，只讲创建组件（注册）的几种方式。
全局注册
Vue.component('my-component-name', {
// ... 选项 ...
})
我们可以用这种方式来创建全局组件，在实例化Vue之前用Vue.component来创建组件，这样我们可以在任何实例化Vue的组件（new Vue）中使用。
具体方式
1、注册组件
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
2、使用组件
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
这样我们就成功创建注册并使用了组件，并且我们还可以在所创建的组件内部相互使用。
局部注册
我们可以以普通对象的方式创建组件，对象中可以包含我们常用的data、methods等属性和方法，比如下面这样
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
注册局部组件的话。需要我们在要使用组件的地方（大多数情况下也是组件）使用components来注册，具体代码如下
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
单文件组件
可能更多时候我们是使用webpack来构建我们的项目（比如：vue-cli），写的更多的是单文件组件，需要在组件中使用另一个组件，下面我就写一下
我们就在vue-cli3的基础上写，首先我们像上面那种方式一样创建一个组件
// /components/Dialog/Dialog.vue
<template>
<transition name="fade" v-if="isShow">
<div class="dialog-page">
<div class="dialog-box">
<h3 class="title">{{ title }}</h3>
<span class="close">X</span>
<el-button type="primary" class="confirm-btn">确定</el-button>
</div>
</div>
</transition>
</template>
<script>
export default {
name: "Dialog",
props: {
title: {
type: String
}
},
data() {
return {
isShow: false
}
},
mounted() {
this.isShow = true;
}
}
</script>
<style lang="scss" scoped>
.dialog-page {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 99999;
.dialog-box {
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
margin: auto;
width: 700px;
height: 400px;
padding-top: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 6px 0 #fff;
.title {
text-align: center;
font-size: 22px;
color: #333;
}
.close {
position: absolute;
right: 20px;
top: 20px;
cursor: pointer;
}
.confirm-btn {
width: 80%;
position: absolute;
left: 10%;
bottom: 50px;
}
}
}
.fade-enter-active, .fade-leave-active {
transition: opacity .2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
然后在App.vue中使用
// App.vue
<template>
<div id="app">
<Dialog title="自定义弹窗组件" />
</div>
</template>
<script>
import Dialog from "components/Dialog/Dialog";
export default {
name: 'app',
components: {
Dialog,
}
}
</script>
这个时候如果运行项目，页面是这个样子（确认按钮我使用了elementUI哦）
首先导入组件，然后使用components注册组件，最后在template中使用组件，这样我们就成功完成了一个组件的创建和使用。这种方式是我迄今为止使用最多的方式，当然也能够满足大部分的需求了。
但是有的情况下这种事不够用的，比如一些用于通知的弹框或者交互的组件，这种组件平时是不显示的，只有触发了某些动作的时候才会显示，如果我们还使用这种方式的话，就要先引入组件，然后再注册，最后在页面中使用，并且我们还要控制组件的显示与否，是不是增加很多无用的变量和代码，那么我们能不能用更简单方便的方式来创建组件呢？答案肯定是有的，往下看。
方法调用式创建
使用过像elementUI和iview之类的第三方组件库的同学可能都知道，他们提供了很多全局的API可以很方便的创建组件，比如弹出框等，他们是怎么做的呢，我们下面就来看看。还是接着上面的弹框组件写。
首先稍微改动一下刚才写的组件，加一些事件（关闭和确认）进去
// /components/Dialog/Dialog.vue
<template>
<transition name="fade" v-if="isShow">
<div class="dialog-page">
<div class="dialog-box">
<h3 class="title">{{ title }}</h3>
<span class="close" @click="close">X</span>
<el-button type="primary" class="confirm-btn" @click="confirm">确定</el-button>
</div>
</div>
</transition>
</template>
<script>
export default {
name: "Dialog",
props: {
title: {
type: String
}
},
data() {
return {
isShow: false
}
},
mounted() {
window.addEventListener('keyup', this.close)
this.isShow = true;
},
methods: {
close() {
this.isShow = false;
// 这里使用$nextTick是因为我们使用了过渡效果，关闭的时候先过渡，再销毁
this.$nextTick(() => {
this.$emit('close')
})
},
confirm() {
this.$emit('confirm')
}
}
}
</script>
<style lang="scss" scoped>
/* 和上面一样，太长不写了 */
...
</style>
新建文件
// /components/Dialog/index.js
import Vue from 'vue';
import Dialog from "@/components/Dialog/Dialog";
let vm;
const noop = () => {};
function createVNode(resolve = noop, reject = noop, props) {
return new Vue({
mixins: [{
mounted() {
document.body.appendChild(this.$el);
},
beforeDestroy() {
document.body.removeChild(this.$el);
},
}],
beforeDestroy() {
vm = null;
},
methods: {
confirm() {
resolve('点击确认');
this.$destroy();
},
close() {
reject('点击关闭');
this.$destroy();
}
},
render(createElement) {
return createElement(Dialog, {
on: {
confirm: this.confirm,
close: this.close
},
props,
style: {
color: 'red'
},
});
}
})
}
function show(props) {
return new Promise((resolve, reject) => {
// 如果有vm这个实例，先销毁
if (vm) {
vm.$destroy();
}
vm = createVNode(resolve, reject, props);
vm.$mount();
})
}
export default show;
倒着看，我们导出了一个show方法，它返回的是一个Promise，这就是说我们在调用这个方法的时候可以用.then的语法在未来某一个时刻（关闭弹框，或者点击确认）执行一些操作。
接着我们创建了一个vm实例，调用了$mount，是不是看着比较熟悉，没错，在main.js文件中
// main.js
...
new Vue({
...
render: h => h(App),
}).$mount('#app');
它把new vue的生成的虚拟DOM转换成真实DOM挂载到了#app上面，那上面我们的$mount没有传参数，会挂载到哪里呢？其实是需要我们手动挂载的，这个就给个传送门吧。
接着说我们的组件，这里我们又看到一个createVNode方法，不用说，这个就是用来创建组件的方法了，可以看到它返回了一个Vue的实例化对象（虚拟DOM），new Vue的参数混入了一些生命周期函数，和两个methods方法，其中在组件渲染完成后手动把当前组建的DOM插入到body中，在组件销毁前移除掉。
最重要的还是下面的render函数，这个内容很多，就不展开说了（我自己也是一知半解，说不好🤔），想深入了解可以单击传送门，可以简单理解render可以生成VNode，就是虚拟节点。它的第一个参数是刚才我们编写的组件，第二个参数是一个对象，可以定义一些参数，比如要传给组件的参数、样式还有监听的事件等。
这样我们new Vue的时候，没有用template的方式，而是用了render函数来生成我们要的组件，手动挂载到DOM中去（不在#app里面，是并列的关系，都在body下面）。
接下来我们就可以在需要的地方调用了，比如App.vue
// App.vue
<template>
<div id="app">
<button @click="handleClick">Dialog</button>
</div>
</template>
<script>
import Dialog from '@/components/Dialog/index'
export default {
name: 'app',
methods: {
handleClick() {
Dialog({
title: '测试弹框'
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
}
}
}
</script>
点击按钮的时候，我们调用导入的Dialog方法，传了title参数，现在我们可以看看效果
到现在我们已经完成了组件的创建和调用，而且我们点击关闭和确认的时候可以看看控制台，是不是分别打印了
这就是我们在App.vue里面调用Dialog方法的时候分别在then和catch里面打印的，回到上面/components/Dialog/index.js文件中的show方法，我们返回的是promise，而且我们把resolve和reject两个参数传入了createVNode方法中，分别在methods中的两个对应确认和关闭的方法中别调用，那么confirm和close是怎么被触发的呢
可以看/components/Dialog/Dialog.vue文件中，我们在点击的时候，使用了$emit来触发对应的事件，那么事件是在哪里被接收的呢？回到/components/Dialog/index.js文件中的render函数，我们在createElement方法的第二个参数中有一个on对象，是不是感觉很熟悉，没错，就是用来监听事件的，我们上面用$emit触发的事件也是在这里监听的。这样我们就在点击确认或者关闭后，执行resolve或者reject方法，然后就可以在then和catch中执行相应的操作了。
注册全局插件
到上面为止，我们已经可以很方便的以API的形式来创建组件，但是可能有人会觉得还不够方便，每次还要先导入，再调用，有没有更方便的方式呢？肯定是有的，现在我们就来试试。
其实也很简单，只需要把刚才的代码稍微改一下就可以了
// /component/Dialog/index.js
...
- export default show;
+ export default {
+ install(vue) {
+ vue.prototype.$Dialog = show;
+ }
+ }
// main.js
+ import Dialog from '@/components/Dialog/index'
+ Vue.use(Dialog);
看到Vue.use又有了熟悉的感觉吧，我们平常使用插件不就是这么用的嘛！没错，第三方的插件能够以Vue.use的方式注册，是因为他们都在插件里面导出了一个install方法，不清楚的看这里哦 Vue.use。
这样我们就可以在需要的地方使用this.$Dialog调用了，也不需要先导入了，因为方法已经被挂到了Vue的原型上。
现在就来试一下
// App.vue
<template>
<div id="app">
<button @click="handleClick">Dialog</button>
</div>
</template>
<script>
export default {
name: 'app',
methods: {
handleClick() {
this.$Dialog({
title: '测试弹框'
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
}
}
}
</script>
效果和刚才是一样的，就不贴图了。ok，到这里是不是觉得和ElementUI提供的一些方法有点相似呢，没错，其实他们也是这么做的。
结语
本文主要介绍了几种创建组件的方式，具体要用哪一种还看根据具体的业务场景来选择，正所谓没有最好的技术方案，只有最合适的。但是说归说，多掌握一点总是好的，后面的内容就涉及到Vue中比较难掌握的内容，比如render、createElement、$mount等。其实这些东西更接近底层，通过学习这些我们可以更深刻的理解Vue,而不只是停留在“会用”的阶段。
好了，就先说到这里，喜欢或者觉得有用可以点赞 + 收藏哦，有错误之处也欢迎指出！！！
刚封装了一个Vue图片预览的插件（vue-preview-imgs）也是我封装的第一个插件，还有很多不足，欢迎一起交流，喜欢给个star哦！地址：https://github.com/hzpeng57/vue-preview-imgs
版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 作者: 恍若如梦hzpeng 原文链接：https://juejin.im/post/6863260665684246542
