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

<script>
import { Button } from 'vant';	// 引入vant的Button组件
export default {
  components: {
    [Button.name]: Button,
  },
}
</script>

调用文件

src/test/main.vue

和导入vant组件一样，我们只需要import到页面即可。

<template>
  <div>
    <test />
  </div>
</template>

<script>
  import Test from './components/test.vue';	// 导入自己编辑好的组件
  export default {	// 应用到页面
    components: {
      Test,
    },
  }
</script>

效果

传递用户参数

• 到这里为止，其实和我上一篇文章将的东西一样，那么下面就是这篇文章的重点了。

• 其实对于真实的使用场景来说，目前的这个组件没什么用，因为它所有数据都是静态的，一个项目中同一个布局，且数据相同的情况几乎是不存在的。反而用得多的是布局相同，但是其中的数据不同，那么我们现在就要将组件的所有数据变为动态的。

定义参数

src/test/components/test.vue

最关键的地方：设置props属性，并使用v-bind将属性动态绑定到组件中。

<template>
  <div>
    <!-- 第一行title -->
    <h2>{{ titleText }}</h2>
    <!-- 第二行按钮 -->
    <van-button :color="btnColor">{{ btnText }}</van-button>
    <br />
    <!-- 第三行图片 -->
    <img width="100px" height="100px" :src="imgSrc" />
  </div>
</template>

<script>
import { Button } from 'vant';
export default {
  // 这里是重点，定义props属性，可多个
  props: ['titleText', 'btnColor', 'btnText', 'imgSrc'],
  components: {
    [Button.name]: Button,
  },
}
</script>

使用可传参的组件

src/test/main.vue

使用组件并向其传递参数。

<template>
  <div>
    <!-- 向其传递定义的属性值 -->
    <test titleText="I'm a title" btnColor="yellowgreen" btnText="I'm a btn" imgSrc="https://img-blog.csdnimg.cn/20200721214932949.png" />
  </div>
</template>

<script>
  import Test from './components/test.vue';
  export default {
    components: {
      Test,
    },
  }
</script>

效果

总结

• 好了，传递参数已经成功，虽然这只是一个没用的组件，但是在正式的项目中，我们可以灵活使用。

• 这里的图片尺寸我给的是一个定值，你也可以是动态数据，试试吧。

• 做完这个例子，我有个想法：在test.vue文件中定义的数据被称作组件，但是它也有引用vant库中的Button组件，它在test.vue中被再次封装，并且能够在main.vue中被调用。那么我们再想一想，是不是main.vue也可以被当作组件被其他文件所引用呢？你可以试试哦！！！