思考
- 我们在主页面使用了
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>