Vue中组件的自定义及其属性定义

写在前面

• 之前写过一篇文章：alita中组件的自定义与组件的再封装，那是alita的版本，最近又在学习vue，所以也研究了一下组件的封装问题，也是对上一篇文章：Vue中自定义标签及其使用的一个补充。

• 本文将主要讲解：自定义组件并且自定义属性，对组件再封装。

需求

1. 第一行为标题，文字内容需要自定义。
2. 第二行为一个按钮，按钮颜色、按钮文字都需要自定义。
3. 第三行为一张图片，图片资源、图片大小都需要自定义。

注意：这里的需求可以是随意的，按照自己的需求来。

定义及编辑文件

自定义组件文件

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" />