父组件向子组件传递数据

一、微信小程序自定义组件的默认js文件

Component({
  /**
   * 可以从父组件获取到的数据
   * 组件的属性列表
   */
  properties: {
  },
  /**
   * 组件自身的固有属性
   * 组件的初始数据
   */
  data: {
  },
  /**
   * 组件的方法列表
   */
  methods: {
  }
})

properties => 组件的属性列表（可以从父组件处获取）
data => 组件的默认属性列表（自身固有属性）
methods => 组件的方法列表 （组件带有的函数）

二、父组件如何向子组件传递参数

父组件向子组件传递参数是通过标签属性的方式
比如：

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

Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabs:[
      {
        id: 0,
        name: "首页",
        isActive: true,
      },
      {
        id: 1,
        name: "原创",
        isActive: false,
      },
      {
        id: 2,
        name: "视频",
        isActive: false,
      },
      {
        id: 3,
        name: "我的",
        isActive: false,
      }
    ]
  },
})

父组件js文件中的data对象中已经定义好了一个名为tabs的数组，数组中存放了我们需要传递给子组件的数据
在wxml文件中，我们只需要在标签中添加属性即可，如下

<tabs arr="{{tabs}}"></tabs>
<!--
    1、<tabs></tabs> 是我们的自定义组件
    2、arr是组件中接受数据的对象名称
    3、tabs是我们父组件向子组件传递的数据名称
-->

组件的js文件如下

Component({
  /**
   * 可以从父组件获取到的数据
   * 组件的属性列表
   */
  properties: {
    arr:{
        type:"Array",   //表示我们接收的数据类型
      value:[], // 表示接受的数据的默认值
    }
  },
  /**
   * 组件自身的固有属性
   * 组件的初始数据
   */
  data: {
  },
  /**
   * 组件的方法列表
   */
  methods: {
  }
})