微信小程序mina框架12.4-自定义组件-父向子传递数据

 

逻辑图，，这里要提醒的是 父组件就是用户页面的wxml     子组件才是自定义主键tabs的 js和wxml文件

 

                              demo8.wxml                                                                        Tabs.js                                                                      Tabs.wxml

 

 

1、将之前放在tabs.js文件data: {}中的tab数组，剪切到demo8.js文件中data: {}中的tab数组里面，

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

  });

 

 

2、将子组件的Tabs.js中的properties: {｝ 属性中的内容修改

properties: {
        tabs: {
            type: Array,
            value: [],
        },
    },

 

3、demo8.wxml文件中

<Tabs tabs="{{tabs}}"></Tabs>

 

4、demo8.json文件内容

{
    "usingComponents": {
        "Tabs": "../../components/Tabs/Tabs"
    }
}

 

显示内容跟之前一样