微信小程序组件Components——父向子传递和子向父传递数据的过程

最新推荐文章于 2025-05-23 09:16:05 发布

原创

最新推荐文章于 2025-05-23 09:16:05 发布 · 2k 阅读

5 ·

CC 4.0 BY-SA版权

本文详细介绍了微信小程序中组件的创建和使用，包括组件的配置文件差异、数据传递以及事件处理。通过实例展示了如何在父页面与子组件之间进行数据交互，强调了组件化开发中数据流动的方向以及槽（slot）的使用，帮助开发者更好地理解和应用小程序组件。

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

前言：组件是微信小程序在开发过程中一个非常重要的知识，可以化简我们的代码复用及编写，但是组件也是相对来说比较难以理解的一个概念，用法也比较纠结，本篇博文将具体介绍组件的基本使用方法

一、简单了解
组件的创建其实和页面很像，其实就是把多个标签通过一定的逻辑整合到了一起形成组件
在这里插入图片描述
这是组件的所需文件，可以看出和页面很像，当然也有些不同
比如在json配置文件中多了 “component”: true的内容

{
   
   
  "component": true,
  "usingComponents": {
   
   }
}

在js文件中多了properties和method属性等

properties: {
   
   
    tabs:{
   
   
      type:Array,
      value:[]
    }
  },
  methods: {
   
   
  
  }

在使用插件的是时候，父级页面需要进行声明，在json配置页面中如何设置

{
   
   
  "usingComponents": {
   
   
  //相对路径应用组件
    "Tabs":"../../components/Tabs/Tabs"
  },
  "navigationBarTitleText": "梨花烧"
}

二、组件的使用
例如，想做一个标签页面
在这里插入图片描述
子组件wxml页面

<view calss="tab"> 
  <view class="tabs_title">
    <view class="title_item {
   
   {item.isActive?'active':''}}" 
    wx:for="{
   
   {tabs}}" 
    wx:key="id" 
    bindtap="handleItemTap" 
    data-index="{
   
   {index}}"
    >{
   
   {
   
   item.name}}</view>