Vue中组件的自定义及其属性定义
程序员文章站
2022-06-22 19:05:03
Vue中组件的自定义及其属性定义写在前面需求定义及编辑文件自定义组件文件调用文件效果传递用户参数定义参数使用可传参的组件效果总结写在前面之前写过一篇文章:alita中组件的自定义与组件的再封装,那是alita的版本,最近又在学习vue,所以也研究了一下组件的封装问题,也是对上一篇文章:Vue中自定义标签及其使用的一个补充。本文将主要讲解:自定义组件并且自定义属性,对组件再封装。需求第一行为标题,颜色需要自定义。第二行为一张图片,图片资源、图片大小都需要自定义。第三行为一个按钮,按钮颜...
写在前面
- 之前写过一篇文章: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" />
</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
也可以被当作组件被其他文件所引用呢?你可以试试哦!!!
本文地址:https://blog.csdn.net/weixin_44901846/article/details/107499063
上一篇: 075【电路方案】基于51单片机室内环境检测仪控制系统
下一篇: 数学科代表