基于element-ui的vue组件的封装（一）

实例内容

封装常见的功能组件 （Button、Modal、Form相关），封装完成后封装成UI组件库发布到NPM上

涉及知识点

• vue基础语法

• 组件基本语法

• 子健通讯（sync、provide、inject）

• 插槽使用

• prop校验

• 过渡与动画处理

• 计算属性和监听属性

• v-model语法糖

• vue插件机制

• npm发布

实例目的

• 掌握组件封装的语法和技巧

• 学会造轮子，了解组件库实现原理

• 搭建和积累自己的组件库

一、使用vue脚手架初始化一个项目

使用 vue created itcast-ui，创建一个名为itcast-ui的项目

二、如何封装，注册和使用一个组件

在component下创建一个button.vue的文件，放置button组件代码。创建一个组件的button组件，并指定name为DLButton。

<template>
  <button class="dl-button">
   按钮组件
  </button>
</template>
 
<script>
 
export default {
  name: 'DlButton'
}
 
</script>
 
<style lang="scss">
 
</style>

创建组件完成后，不能再项目中直接使用，需要到main.js中注册才可以使用

import Vue from 'vue'
import App from './App.vue'
//第一步：导入button组件
import DlButton from './components/button.vue'
​
Vue.config.productionTip = false
​
//第二步： 注册组件， 设置（组件名， 组件）
Vue.component(DlButton.name, DlButton)
​
new Vue({
    render: h => h(App)
}).$mount('#app')

注册完成后，组件就可以在项目中直接使用了

<template>
    <div>
        <dl-button></dl-button>
    </div>
</template>

按钮效果：

 

组件最简单的封装，注册和使用的方法就是这个流程

三、封装一个element-ui风格的按钮

需要使用的知识：

1. 组件通讯

2. 组件插槽

3. props校验

参数支持：

参数名	参数描述	参数类型	默认值
type	按钮类型（primary/success/warning/danger/info）	string	default
plain	是否是朴素按钮	boolean	false
round	是否是圆角按钮	boolean	false
circle	是否是原型按钮	boolean	false
disabled	是否禁用按钮	boolean	false
icon	图标类名	string	无

事件支持：

事件名	事件描述
click	点击事件

使用插槽：

简单来说，凡是希望组件中内容可以灵活设置的地方，都需要用到slot插槽来自定义内容

使用slot来定义按钮的文本内容：

<template>
    <button class="dl-button">
        <span><slot></slot></span>
    </button>
</template>

在使用时就可以直接输入文本，定义按钮文本内容了：

<template>
  <div>
    <dl-button>登录</dl-button>
    <dl-button>删