关于微信小程序的父子组件互相传值

一：父组件传值给子组件

1. 在父组件中引用子组件

1.1 在父组件json中导入子组件

{
  "usingComponents": {
    "test":"../../components/test/test",
    "tabs":"../../components/tabs/tabs"
  }
}

看下图

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

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

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

<tabs aaa="123"></tabs>

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

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

看下图

二：子组件传值给父组件

子组件向父组件传参

1.在父组件的子主件的标签上自定义一个事件

<tabs list="{{list}}" binditemClick="onItemClick"></tabs>

2.在子组件中通过triggerEvent

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

 this.triggerEvent("itemClick",{ activeId})

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

<tabs list="{{list}}" binditemClick="onItemClick"></tabs>

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

//这个是在父主件的子主件自定义的一个事件
  onItemClick(e) {
    console.log('这里是父组件内的onItemClick事件', e);
    let {
      activeId
    } = e.detail;
    let {
      list
    } = this.data;
    list.forEach(item => item.isActive = item.id === activeId)
    this.setData({
      list: list
    })
  }

看下图