思考

• 我们在主页面使用了panel组件，而panel组件内部使用了tabBar组件，这时候我们应该如何正确的传递数据给tabBar组件呢？
• 其实也很简单，就是主页面传值给panel组件，panel组件在传值给tabBar组件，这样就间接实现了主页面给tabBar组件传值。

主页面使用panel组件

• 注册组件到页面

  • 注册定义组件json

    {
    "usingComponents": {
    "panel" :"/compontents/panel/panel"
    }
    }

• 主页面初始化数据

  ...
  data: {
   items:[
       {id:1,name:"测试"},
       {id:2,name:"测试1"}
   ]
  }
  ...

• 主页面调用panel组件wxml并传值

  <panel panelItem="{{items}}"/>

组件panel

• 组件所在目录位置 /compontents/panel/panel

• 在组件panel的js文件中定义接受的值,其中type为类型,value为默认值

  ...
  properties: {
   panelItem:{
      type:Array,
      value:[]
  }
  },
  ...

• 组件wxml

  <view>
  ...
   <tabBar tabBarItem="{{panelItem}}"
  ...
  </view>

组件tarBar

• 组件所在目录位置 /compontents/tabBar/tabBar

• 在组件tarBar的js文件中定义接受的值,其中type为类型,value为默认值

  ...
  properties: {
   tabBarItem:{
      type:Array,
      value:[]
  }
  },
  ...

• 组件wxml

  <block x:for="{{tabBarItem}}" wx:key="index">
   <view>{{item.id}}<view>
   <view>{{item.name}}<view>
  </block>