小程序 之页面获取自定义组件中的值

1. 新建组件：在component下新建一个tabBar
   
2. 在组件的index.wxml中写如下代码：

<cover-view class="tab-bar">
	<cover-view class="tab-bar-border"></cover-view>
	<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="tabChange">
		<cover-image src="{{tabbarIndex === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
		<cover-view style="color: {{tabbarIndex === index ? selectedColor : color}}">{{item.text}}</cover-view>
	</cover-view>
</cover-view>

3. 在组件的index.js中写如下代码：

Component({
	properties: {
	    list: {
	      type: Array,
	      value: []
	    },
	    selectedColor:{
	      type: String,
	      value:''
	    },
	    color:{
	      type: String,
	      value:''
	    },
	  },
	data: {
	    tabbarIndex: 0//默认显示第一个tab元素
	  },
	methods: {
	    //组件的点击事件
	    tabChange(e) {
	      //获取到底部栏元素的下标
	      let index = e.currentTarget.dataset.index;
	      this.setData({
	        tabbarIndex:index,
	      })
	      //triggerEvent获取组件的事件
	      //onMyEvent 页面传过来的点击事件名称
	      this.triggerEvent('onMyEvent',{
	        tabbarIndex:index,
	      })
	    },
	  }
  })

4. 在页面pages/index/index.json中加入

{
  "navigationBarTitleText": "测试",
  "usingComponents": {
    "mp-tabbar": "../components/tabBar/index"
  }
}

5. 在页面pages/index/index.wxml中加入

<view wx:if="{{tabbarIndex == 0}}">111111</view>
<view wx:if="{{tabbarIndex == 1}}">222222</view>
<view wx:if="{{tabbarIndex == 2}}">333333</view>
<mp-tabbar list="{{list}}" id='tabComponent' bind:onMyEvent="switchTab"></mp-tabbar>

6. 在页面pages/index/index.js中加入

//获取组件传递出来的数据
  switchTab:function(e){
    let index = e.detail.tabbarIndex;
    this.setData({
      tabbarIndex:index
    })
    console.log(e.detail.tabbarIndex)
  }

7. 运行