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

待我称王封你为后i 2023-01-03 04:46 201阅读 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 条评论，201人围观）

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

相关阅读

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

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

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

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

在写小程序的时候，有时候页面的内容过多，逻辑比较复杂，如果全部都写在一个页面的话，会比较繁杂，代码可读性比较差，也不易于后期代码维护，这时候可以把里面某部分功能抽出来，单独封装

╰半橙微兮°/ 2023年10月03日 22:37/ 0 赞/ 15 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

手把手教你实现微信小程序中的自定义组件微信小程序中的组件前言之前做小程序开发的时候，对于开发来说比较头疼的莫过于自定义组件了，当时官方对这方面的文档也只

向右看齐/ 2022年06月03日 03:50/ 0 赞/ 312 阅读