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

89 阅读 0 评论 59 点赞

我是靠谱客的博主懵懂蚂蚁，最近开发中收集的这篇文章主要介绍只需5步，教你实现Vue组件封装，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

在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>

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

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

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

export default Button

与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
}

在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')

组件封装完成，在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>