小程序开发：自定义组件，组件的基本使用

待我称王封你为后i 2023-01-03 04:46 254阅读 0赞

自定义组件是为了方便提取公共的部分来实现调用，比如头部，底部的一些公共的部分就可以使用公共组件来完成；

## 自定义组件 ##

1.  在pages的同级目录下创建 components 文件夹；
2.  在components文件夹中创建一个文件夹，然后右击文件夹选择新建components；
3.  如果那个pages 需要组件就在对应的 .json文件中注册；
4.  页面中引入组件名标签；

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70 1]

## 组件的属性传值 ##

1，先在组件标签中自定义一个属性 myTitle

<all mytitle="this is a data"></all>

2，在对应组件js中的 properties 中接受传过来的值

properties: { 
        mytitle: { 
          type: String,
          value: "如果没有传值这里将是默认值"
        }
      },

3，在组件中 显示对应的值

<text>{
       {mytitle}}</text>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70]: /images/20221119/ea97f5a0074048eb97e94419e5677af5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221119/4e7cffe2bb44428b9fb5ed9410f8a7a7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，254人围观）

还没有评论，来说两句吧...

相关阅读

相关【小程序】自定义组件样式

目录组件的创建与引用 1. 创建组件 2. 引用组件 3. 局部引用组件 4. 全局引用组件编辑 5. 全局引用 VS 局部引用 6. 组件和页面的区别

你的名字/ 2024年03月30日 12:03/ 0 赞/ 185 阅读

相关【小程序】组件化开发的基本使用(二)

文章目录组件化开发使用组件通信使用过程组件插槽定义使用单个插槽的使用

朱雀/ 2023年10月02日 20:41/ 0 赞/ 74 阅读

相关【小程序】组件化开发的基本使用(一)

文章目录小程序组件化开发基本使用小程序组件化思想自定义组件的过程组件样式实现细节

女爷i/ 2023年10月02日 20:41/ 0 赞/ 77 阅读

相关小程序---原生开发---自定义组件

在开发过程中，我们经常需要创建一些公用组件以便方便我们多次调用。组件的功能以及事件的一个传递，这使得需要注意，有些组件可能样式一样，点击的事件效果会有所不同，所以组件需要功能多

系统管理员/ 2023年07月18日 12:50/ 0 赞/ 124 阅读

相关小程序自定义组件的使用

小程序自定义组件的使用 [官网地址][Link 1] 1、新建一个目录专门放自定义组件，在该目录下新建一个 Component ![在这里插入图片描述][2019

红太狼/ 2023年06月17日 10:53/ 0 赞/ 51 阅读

相关小程序自定义组件使用详解

之前写过怎么使用小程序的组件，Weui，今天总结一下，怎么使用自定义组件，以 select 下拉框为例 ![20200708101159902.png][] 首先，自定义组

我就是我/ 2023年02月24日 03:44/ 0 赞/ 107 阅读

相关小程序开发：自定义组件，组件的基本使用

自定义组件是为了方便提取公共的部分来实现调用，比如头部，底部的一些公共的部分就可以使用公共组件来完成；自定义组件 1. 在pages的同级目录下创建 compone

待我称王封你为后i/ 2023年01月03日 04:46/ 0 赞/ 255 阅读

相关微信小程序自定义组件

[https://blog.csdn.net/melovemingming/article/details/82712601][https_blog.csdn.net_melo

刺骨的言语ヽ痛彻心扉/ 2022年12月24日 15:49/ 0 赞/ 475 阅读

相关小程序自定义组件实现以及组件之间通信

概述小程序自定义组件实现 .自定义组件与父组件之间通信以及事件绑定自定义组件实现具体内容子组件文件 ![202009031049509

冷不防/ 2022年12月03日 09:49/ 0 赞/ 250 阅读

相关 38.微信小程序（组件--自定义组件）

微信小程序（组件–自定义组件）前言缘由：小程序的界面是由一系列组件构成的。小程序基础库提供了一组基础组件来满足开发者的基本需求。但随着小程序开发变得越来越

不念不忘少年蓝@/ 2022年11月25日 00:35/ 0 赞/ 419 阅读