微信小程序-自定义组件传参

最新推荐文章于 2025-04-15 23:40:44 发布

源小新

最新推荐文章于 2025-04-15 23:40:44 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序开发文章标签：小程序

本文链接：https://blog.csdn.net/yuan_xiaoxin/article/details/118252263

本文介绍了微信小程序中自定义组件的创建、声明、编辑、注册和使用方法，重点讲解了如何通过属性和事件实现父组件向子组件传递参数。通过组件构造器定义组件属性、数据和方法，并提供了组件间通信的流程和示例代码，帮助开发者掌握自定义组件的参数传递技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义组件介绍

类似于vue或者react中的自定义组件

小程序允许我们使用自定义组件的方式来构建页面

类似于页面,一个自定义组件由json wxml js 4个文件组成的

可以在微信开发者工具中快速创建组件的文件结构,如图所示

在这里插入图片描述

在文件夹内 components/myHeader ,创建组件名为myHeader

在这里插入图片描述

首先需要在组件的 json 文件中进行自定义组件声明

myHeader.json

{
   
	"component":true
}

同时,还要在组件的 wxml 文件中编写组件模板,在 wxss 文件中加入组件样式

solt 表示插槽,类似vue中的slot

myHeader.wxml

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
 {
  {innerText}}
    <slot></slot>
</view>

在组件的wxss文件中编写样式

注意: 在组件中wxss中不应该使用Id选择器,属性选择器和标签名选择器

myHeader.wxss

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red; }

在组件的js文件中,需要使用Component()来注册组件,并提供组件的属性定义.内部数据和自定义方法

myHeader.js

Component({
   
  properties: {
   
    // 这里定义了innerText属性，属性值可以在组件