小程序开发之父组件向子组件传递数据

小程序开发之父组件向子组件传递数据

提要：此篇文章是在已经创建好自定义组件和当前页面的前提下传递参数，仅仅涉及传递参数的部分，简洁明了，对应的代码做出相应的效果解释

1.在购物车页面car.js这个文件中，存入数据：

// pages/car/car.js
Page({
    data: {
        tabs: [{
            id: 0,
            name: "首页",
            isActive: true
        }, {
            id: 1,
            name: "原创",
            isActive: false
        }, {
            id: 2,
            name: "分类",
            isActive: false
        }, {
            id: 3,
            name: "关于",
            isActive: false
        }, ]
    },
})

2.在car.wxml中使用已经自定义的组件标签Tabs，并且绑定tabs属性和tabs值（这里的"{{tabs}}"就是tabs属性的值，也就是上面data中的tabs数组）：
<Tabs tabs="{{tabs}}"></Tabs>

3.在自定义的组件文件Tabs.js中，声明tabs的类型是一个数组，value暂时为空

// components/Tabs/Tabs.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        tabs: {
            type: Array,
            value: []
        }
    },

    /**
     * 组件的初始数据
     */
    data: {

    }})

4.在Tabs.wxml文件中，使用wx:for循环，遍历传递进来的tabs数组，如下：

<view class="tabs_title">
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive ? 'active' : '' }}"
bindtap="handleTapActive"
data-index="{{index}}">
{{item.name}}
</view> 
</view>

其效果如下：