只需5步，教你实现Vue组件封装

虽然Vue有着诸如Element、Vant、iView等优秀的UI组件库，但是在日常开发中难免会有这些组件库难以满足的组件开发需求。这时就需要我们自己来封装组件。下面就来教大家如何封装一个button组件。

1. 在components文件夹内创建一个hee-button文件夹，再在hee-button文件夹中创建一个src文件夹，src文件夹中创建一个main.vue文件。

<template>
<div>
<button :class="type==='primary'?'primary btn':type==='danger'?'danger btn':type==='warn'?'warn btn':'default btn'">
<slot>按钮</slot>
</button>
</div>
</template>

<script>
export default {
name: 'hee-button',
props: {
type: {
type: String,
default: 'default'
}
}
}
</script>

<style scoped>
.btn{
width: 80px;
height: 30px;
}
.default{
background: #f00;
}
.primary{
background: #0f0;
}
.danger{
background: #00f;
}
.warn{
background: #ff0;
}
</style>

1. 与src文件夹平级再创建一个index.js文件。

import Button from './hee-button.vue'

Button.install = (Vue) => {
Vue.component(Button.name, Button)
}

export default Button

1. 与hee-button文件同级建立一个index.js文件，对组件进行注册，同时也注册进install中，在导出时，不仅要引出全局的，而且单个的也要引出，便于局部或全局引用。

import Button from './hee-button'

const components = [
Button
]

// vue.use使用时，必须要有install方法。参数就是vue。
const install = (Vue) => {
for (var key in components) {
Vue.component(components[key].name, components[key])
}
}

export default {
install,
Button
}

1. 在main.js中进行引用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import HeeButton from './components'
Vue.use(HeeButton)
Vue.config.productionTip = false

new Vue({
router,
render: h => h(App)
}).$mount('#app')

1. 组件封装完成，在App.vue中可以进行使用了。

<template>
<div id="app">
<hee-button></hee-button>
<hee-button type="primary">primary</hee-button>
<hee-button type="danger">danger</hee-button>
<hee-button type="warn">warn</hee-button>
</div>
</template>

效果如下：