小程序中的父子组件传参

比眉伴天荒 2022-11-18 01:56 209阅读 0赞

**微信小程序组件化编程和实践（上）**：[https://cloud.tencent.com/developer/article/1029112][https_cloud.tencent.com_developer_article_1029112]

**微信小程序组件化编程和实践（下）**：[https://cloud.tencent.com/developer/article/1029113][https_cloud.tencent.com_developer_article_1029113]

根据公司的业务需求我是如何封装组件的：[https://cloud.tencent.com/developer/article/1745596][https_cloud.tencent.com_developer_article_1745596]

**思考：**为什么使用组件？组件之间传参的意义何在？

组件化这个思想，类似于工业制造中的汽车生产-----零件组装，这样不管是是对于汽车的维修、改装都提供了便历。在软件开发模型——构建组装模型中，组件复用是很重要的一个思想，对于一个公司，他们可以可以构建自己的组件库，从而他们对相同类型的软件提供大大便历，并且这些组件库中的组件，都是经过时间检验的，不容易出错。

组件间的传值：因为组件我们只会定义一些接口来对接，而所需要的数据需要从某个入口传入（父组件）。当我们触发子组件的时候，父组件对应的也应该做出相应的反应。

**一、父组件向子组件传参**

** 方式：通过属性绑定的方式传递**

**步骤：** 具体参见官方文档：[https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html][https_developers.weixin.qq.com_miniprogram_dev_framework_custom-component_wxml-wxss.html]

1、在微信小程序结构目录中，新建一个组件组（组件的集合）。该组件组与页面在同一级目录下![20210411214213327.png][]

2、新建一个header组件

a、header.json   **设置"component": true** ——含义：可设置自定义组件

b、父组件引用  \*\*\*.json设置 **引用组件路径 "header":"../../components/header/header"**

父组件 设置tabs属性并绑定tabs参数
    ***.wxml
    <header tabs="{
       {tabs}}"></header>
    子组件 
    ***.js  利用properties获取父组件属性，并设置类型
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        tabs:{
          type:Array,
          value:[]
        }
      }
    )}

**二、子组件向父组件传递参数**

**方式：通过方法绑定的方式传递**

1.在子组件中通过**triggerEvent**定义一个函数并绑定参数

2.在父组件**绑定子组件中定义的方法**，并**写一个处理的方法接受传递过来的参数**

例如：在子组件中自定义一个itemChange方法    ，在父组件中绑定这个方法   （bind+itemChange）,并处理定义一个handleItemChange来处理接受的参数。

========================子组件定义
    header.wxml
    <view  bindtap="tapchange"></view>
    -------header.js
    Component({
     methods: {
        tapchange:function(e){
        // 利用子组件向父组件
        const {index} = e.currentTarget.dataset//获取当前选中的下标
        console.log(index)
        this.triggerEvent("itemChange",{index})//自定义事件(bind+'自定义名')：用它触发父组件的定义事件，同时给父组件传参
        }
      }
    })
    
    =======================父组件定义  
    -------***.wxml  
    <headertabs="{
       {tabs}}" binditemChange="HandleItemChange"></header>
    -------***.js
    HandleItemChange:function(e){
       console.log(e.detail.index)
    }

[https_cloud.tencent.com_developer_article_1029112]: https://cloud.tencent.com/developer/article/1029112
[https_cloud.tencent.com_developer_article_1029113]: https://cloud.tencent.com/developer/article/1029113
[https_cloud.tencent.com_developer_article_1745596]: https://cloud.tencent.com/developer/article/1745596
[https_developers.weixin.qq.com_miniprogram_dev_framework_custom-component_wxml-wxss.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
[20210411214213327.png]: /images/20221022/6585239f05234d36a19e09683f358f21.png