写在前面
- 之前写过一篇文章:alita中组件的自定义与组件的再封装,那是alita的版本,最近又在学习vue,所以也研究了一下组件的封装问题,也是对上一篇文章:Vue中自定义标签及其使用的一个补充。
- 本文将主要讲解:自定义组件并且自定义属性,对组件再封装。
需求
- 第一行为标题,文字内容需要自定义。
- 第二行为一个按钮,按钮颜色、按钮文字都需要自定义。
- 第三行为一张图片,图片资源、图片大小都需要自定义。
注意:这里的需求可以是随意的,按照自己的需求来。
定义及编辑文件
自定义组件文件
src/test/components/test.vue
这里按照需求,先绘制出这个模板,目前所有数据都是静态的。
<template>
<div>
<!-- 第一行title -->
<h2>我是aolyu</h2>
<!-- 第二行按钮 -->
<van-button color="red">我是按钮</van-button>
<br />
<!-- 第三行图片 -->
<img width="100px" height="100px" src="https://img-blog.csdnimg.cn/20200721214932949.png" />