【已解决】微信小程序子组件向父页面之间传值！

在做组件开发的时候，子组件与父组件之间传值非常有必要，例如，我这样一个需求：封装了一个tab切换的组件，父组件需要将菜单的内容传给子组件，子组件需要把选中的层级返回，这样父页面可以根据传回的层级显示不同的列表内容。
效果如下图：

1.父页面向子组件传值

父页面向子组件传值很简单，直接把值传给对应的参数即可！

a.父页面传参数

html:

<ui-scroll-tab  TabLists="{{testList}}" tabCur="{{current}}" ></ui-scroll-tab>

js:

data: {
  testList:[ {id:0,name:"菜单0"},
      {id:1,name:"菜单1"},
      {id:2,name:"菜单2"},
      {id:3,name:"菜单3"},
      {id:4,name:"菜单4"},
      {id:5,name:"菜单5"},
      {id:6,name:"菜单6"} ],
    current:0
}

b.子页面接收参数

html:

<scroll-view scroll-x class="tab-nav" scroll-with-animation scroll-left="{{scrollLeft}}">
  <block wx:for="{{TabLists}}" wx:key="index">
    <view class="tab-item {{item.id==tabCur?'cur':''}}"   bindtap="tagSelect"  data-id="{{item.id}}" data-index="{{index}}">
      {{item.name}}
    </view>
  </block>
</scroll-view>

js:

Component({
  properties: {
    TabLists: {
      type: Object,
      value: [],
    },
    tabCur: {
type: Number,
value: 0
    },
    scrollLeft:{
type: Number,
value: 0
    },
  },
  data: {
    TabLists:[],
    tabCur:0,
    scrollLeft: 0,
  },
  methods: {
    tagSelect(e) {
      this.setData({
        tabCur: e.currentTarget.dataset.id,
        scrollLeft: e.currentTarget.offsetLeft - 165,
      }) 
    } 
  }
})

这样搞完，就发现，组件可以用了，点击切换都可以实现了，只不过父页面不能获取到tab选中的层级。

2.子组件向父页面传值

a.子组件js中通过triggerEvent给组件绑定一个名为：tabChange的js事件，并将需要传出的值写入：

this.triggerEvent('tabChange', {
        tabCur: this.data.tabCur
})

b.父页面通过“bind+事件名”在组件上添加triggerEvent预设的事件
html:

<ui-scroll-tab  TabLists="{{testList}}" tabCur="{{current}}" bindtabChange="getTabCur"></ui-scroll-tab>

js:

getTabCur(e) { //获取子组件传递的值，并更新页面的值
    this.setData({
      current:e.detail.tabCur
    })
}

然后看效果，发现传值成功了，组件恢复正常了，可以联动显示对应的数据，表示父子传值ok了！