前言
日常Vue开发常用组件有Vant、ElementUi、VuxUI、MintUI等组件库。可是作为一个前端菜鸡常常也会遇到需要自己封装组件的需求。所以在下面会介绍自己封装组件的心得体会。
准备
首先创建一个Vue项目
1.先安装node
菜鸟教程有相关教程 终端输入node -v，如果出现相应的版本号，则说明安装成功。
2.安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装webpack
npm install webpack
4.安装vue-cli脚手架构建工具
npm install vue-cli -g
安装完成之后输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。
5.初始化项目：
vue init webpack 项目名
填写项目相关信息
下载完成
1.进入项目文件夹
2. npm run dev //启动项目
然后将没用的文件都删除，创建一个home.vue用来测试组件。
开搞！
在components文件夹下创建文件navBar用来制作顶部导航栏。
首先创建顶部导航栏我们需要将样式写好。
简单的顶部导航栏我们需要这样的效果
首先在图标库找一张返回iocn并使用img引用
在使用插槽定义一个标题
代码插入
<div class="navBar">
<div class="reverse">
<img src="图标路径">
</div>
<div class="title">
<slot>{{title}}</slot>
</div>
</div>
在添加一下样式我们的顶部导航样式就完成了
代码插入
.navBar{
display: flex; //横向布局
box-shadow: 0px 0px 5px 0px #f0eeee; //添加阴影效果
padding: 10PX 0; //内边距
}
.reverse{
margin-left: 10px; //图标外边距
}
.title{
margin: 0 auto; //居中
}
.title span{
font-size: 18px; //字号大小
font-weight: 500; //字号加粗
color: #2c2c2c; //字体颜色
}
.reverse img{
width: 20px; //图标宽
height: 20px; //图标高
vertical-align: middle; //对齐方式
}
现在样式完成后就该考虑用户需求了。
1.导航栏标题可以自定义
2.返回按钮可以选择显示或隐藏
3.返回按钮点击后的事件
需要完成这三个需求我们就要向父组件传两个值及一个方法
代码插入
props: {
title: String,
reverse: Boolean,
},
title 是用户填写的标题名
reverse 是控制返回按钮是否显示的布尔值
title 我们在上面的插槽已经插入了
reverse 我们则需要在上面的图标做判断了
<img src="图标路径" v-show="reverse">
我们使用v-show来根据用户所传的布尔值进行判断是否显示返回按钮
最后我们需要将返回按钮方法返回给用户
我们在methods方法中加入我们的方法
代码插入
childClick() {
this.$emit('goback')
}
核心就是通过$emit来触发自定义事件（不需要注册），并且传值出去
并把事件添加到返回图标上
代码插入
<img src="../../assets/image/reverse.png" @click="childClick" v-show="reverse">
完成后我们将组件引入home中测试是否实现效果
首先我们在home文件中引入组件
import navBar from '../components/navBar/YesnavBar.vue'
引入完成后注册引入的组件
components:{
navBar,
},
然后在我们的展示层中加入该组件
<nav-bar title="导航" @goback="demo" reverse></nav-bar>
title是我们插槽里定义的标题
reverse是我们控制返回按钮是否显示的值
@goback则是我们定义的返回按钮点击事件
ok！
测试title没问题可以自定义
而不加入reverse返回图标也就不显示了
接下来就测试下返回图标点击事件
demo(){
console.log('古德古德')
},
@goback事件绑定demo
打开控制台
成功打印古德古德
结语
封装组件主要就是用于组件库无法满足项目需求后常用组件使用封装。便捷的使用组件能提升开发速度所以组件封装也是很重要的一部分，但是强烈建议在组件库满足项目需求的情况下还是使用组件库。
