微信小程序组件传值

1. 父组件(页面)向子组件传参

在父组件的子组件标签上增加一个自定义属性
在子组件中通过properties来接收

在父组件 json 中导入子组件

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

在子组件的 json 中，把自己定义为子组件

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

在父组件中，子组件的引用处，绑定一个属性( list )，并传递想要给子组件的值( list )

<Tabs list="{{ list }}"></Tabs>

在子组件中的 js 中使用 properties 获取值，这样就可以在子组件中用 this.data.list 获取到值

properties: {
    // 要接收参数的属性名
    list: {
      // 参数的值类型
      type: Array,
      // 接收过来参数的默认值
      value: []
    }
  }

在子组件的 wxm l中直接使用渲染即可

<view class="tabs">
  <view class="tabs_title">
    <view 
      wx:for="{{ list }}"
      wx:key="id"
      bindtap="onTtemClick"
      data-active-id="{{ item.id }}"
      class="tabs_title_item {{ item.isActive ? 'active' : '' }}"
    >
    {{ item.name }}
    </view>

2.子组件(页面)向父组件传参

在父组件的子组件的标签上自定义一个事件
子组件中通过this.triggerEvent(“自定义事件名”,{ 参数 })

子组件在需要传值时，使用 triggerEvent 传给父组件一个事件( itemClick），并传递想要给父组件的值( activeId )

// 触发父组件中自定义的事件 向父组件传递数据
this.triggerEvent("itemClick", { activeId });

在父组件中，子组件的引用处，通过这个 binditemClick 事件绑定一个方法( onItemClick )

<Tabs binditemClick="onItemClick"></Tabs>

在父组件的js中，定义这个方法 onItemClick，在这个方法内就可以获取到子组件传递过来的值

onItemClick(e){
    // console.log(e);
    let { activeId } = e.detail;
    let { list } = this.data;
      list.forEach(item => {
        item.isActive = item.id == activeId;  
      })
      this.setData({
        list
      })
  }