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

最新推荐文章于 2024-07-30 22:36:34 发布

小小前端_可笑可笑

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量5.2k

点赞数 3

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44901846/article/details/107499063

版权

本文介绍如何在Vue中定义自定义组件并自定义属性。通过实例展示了如何传递用户参数，使组件数据动态化，包括标题、按钮和图片等元素的自定义。文章最后提出思考，组件是否能被其他文件作为组件引用。

摘要由CSDN通过智能技术生成

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