实例内容
封装常见的功能组件 (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风格的按钮
需要使用的知识:
-
组件通讯
-
组件插槽
-
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>删除</d