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

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

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 uni-app引入小程序自定义组件的混合开发

小程序自定义组件支持 uni-app 支持在 App 和小程序中使用小程序自定义组件，从HBuilderX2.4.7起，H5端也可以运行微信小程序组件。小程序组件

落日映苍穹つ/ 2022年09月12日 08:57/ 0 赞/ 294 阅读

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

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

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

相关 mpvue中小程序自定义导航组件开发指南

这篇笔记主要记录一下基于mpvue的小程序中实现自定义导航的思路及应用。分享出来抛砖引玉，如有谬误或优化空间，欢迎交流。小程序的配置项`navigationStyle`设置

系统管理员/ 2022年03月12日 12:45/ 0 赞/ 189 阅读

相关 mpvue中小程序自定义导航组件开发指南

这篇笔记主要记录一下基于mpvue的小程序中实现自定义导航的思路及应用。分享出来抛砖引玉，如有谬误或优化空间，欢迎交流。小程序的配置项`navigationStyle`设置

野性酷女/ 2022年03月07日 00:36/ 0 赞/ 265 阅读

相关 mpvue中小程序自定义导航组件开发指南

这篇笔记主要记录一下基于mpvue的小程序中实现自定义导航的思路及应用。分享出来抛砖引玉，如有谬误或优化空间，欢迎交流。小程序的配置项`navigationStyle`设置

淩亂°似流年/ 2022年03月07日 00:36/ 0 赞/ 202 阅读