微信小程序父子组件之间的传值

需求：自定义了tabbar组件；

        父级给子组件传值、子组件给父组件传值

父组件：

        wxml：

<tabbar bind:changeTabbarItem="getTabbarItem" currentUser="{{currentUser}}" />


//changeTabbarItem：是子组件通过这个方法给父组件传值的
//getTabbarItem：父组件通过此方法获取子组件传过来的值

        JS： 

data: {
    currentUser:'城管局'//将传给子组件的值
  },

getTabbarItem(e){
    console.log('获取子组件传过来的值：',e.detail.value)
  },

        JSON：

{
  "usingComponents": {
    "tabbar": "/components/tabbar/tabbar"
  }
}

这是父组件给子组件传值的结果：

---

子组件：

        WXML：

<van-tabbar active="{{active}}" bind:change="onChange">
  <van-tabbar-item wx:for="{{list}}" wx:key="index" wx:if="{{item.show}}" icon="{{item.icon}}" data-path="{{item.pagePath}}">
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

        JS：

Component({
  properties:{
    currentUser:{}
  },
  data: {
    active:0,
  },
  ready(){
    
  },
  observers:{//这里是监听父组件传递过来的值的动态变化
    'currentUser':function(val){
      console.log(val)
    }
  },
  methods: {
    onChange: function (event) {//子组件点击自己的点击事件去给父组件通过changeTabbarItem传值
      console.log('点击了tabbar：',event.detail)
      this.setData({ active: event.detail })
      this.triggerEvent('changeTabbarItem',{value:event.detail})
      // wx.switchTab({
      //   url: this.data.list[event.detail].pagePath,
      // })
    }
  },
})

        JSON： 

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

子组件的json中须要声明： "component": true,