微信小程序 - 组件传值

在组件传值前，需要了解如何创建组件。
首先需要在你创建的子组件的.json文件中进行自定义组件的声明，将 component 定义为 true。

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

在你的父文件夹下的.json文件下引入子组件。

{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs"
  }
}

然后在父组件里 以标签的形式写入子组件。

<Tabs></Tabs>

接下来就是组件传值，组件传值分为两种父传子，子传父，首先来介绍父传子。
父组件(页面组件)向子组件传递数据 --通过标签属性来传递

<Tabs tabs="{{tabslist}}}"></Tabs>

将tabslist的内容定义在父组件中

data: {
    tabslist: [
      {
        id: 0,
        name: "首页",
        isActive: true
      },
      {
        id: 1,
        name: "原创",
        isActive: false
      },
      {
        id: 2,
        name: "分类",
        isActive: false
      },
      {
        id: 3,
        name: "关于",
        isActive: false
      },
    ]
  }

子组件的.js文件中

 properties: {
    // 要接收的数据的名称
    tabs:{
      // type  要接收的数据的类型 
      type:Array,
      // value  默认值
      value:[]
    }
  },

子组件的页面.wxml中

 <view 
    wx:for="{{tabs}}"
    wx:key="*this"
    data-index="{{index}}"
    >
    {{item.name}}
 </view>

这样子组件就能够接受到父组件传递的内容。接下来是子组件向父组件传递值。
想要子组件给父组件传递值，需要通过自定义事件来进行。``

this.triggerEvent("父组件自定义事件的名称",要传递的参数)
const {index}=e.currentTarget.dataset;
this.triggerEvent("itemChange",{index});

首先需要在子组件的标签上加上一个自定义的事件

<Tabs aaa="{{tablist}}" binditemChange="handle"></Tabs>
小程序中绑定事件需要加上bind

然后在父组件的.js文件中定义handle

//自定义事件，用来接收子组件传递的数据
  handle(e){
    const { index } = e.detail;
    let { tablist } = this.data;
    tablist.forEach((v, i) => i === index ? v.isActive = true : 		   v.isActive = false);
    this.setData({
      tablist
    })
  }

这样在点击子组件的时候就能够修改父组件数据的状态