微信小程序-传递数据父传子

在我们自定义组件当中，有时候组件的内容也许的通过 JS 文件里面的 data 数据进行展示的，我们先简单的来搭建一下这个结构：

<!-- 
c-example.wxml
 -->
<view class="container">
  <view>{{title}}</view>
  <view>{{msg}}</view>
</view>

然后是我们的 JS 文件：

// c-example.js
Component({
  data: {
    title: 'BNTang',
    msg: 'hello world'
  },
})

这个时候我们去首页页面，多复制几个出来：

<!-- 
index.wxml
 -->
<myExample/>
<myExample/>
<myExample/>
<myExample/>
<myExample/>

总共是 5 个，这个时候我有个需求，想让 title 和 msg 分别展示不同的内容，就是说每一个的 myExample 组件的 title 与 msg 内容都是不一样的，这个时候该如何进行实现呢，可能大家也有点思路了，我们将我们不一样的 title 与 msg 的内容告诉 myExample 不就行了吗，雀实是这样子的，那么该如何告诉它呢，这个时候就有了我们的组件传递数据这么个知识点的介绍了，这里介绍的是父传子：

官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

好，看了官方文档的介绍之后我们直接改造下我们的自定义组件的JS文件定义两个属性用于外部传入：

// c-example.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    headTitle: {
      type: String,
      value: 'default headTitle value',
    },
    context: {
      type: String,
      value: 'default context value',
    },
  }
})

在更改我们页面的显示代码：

<!-- 
c-example.wxml
 -->
<view class="container">
  <view>{{headTitle}}</view>
  <view>{{context}}</view>
</view>

更改我们首页使用 c-example 的代码传入需要显示的数据：

<!-- 
index.wxml
 -->
<myExample headTitle="BNTang1" context="BNTnag 1 context"/>
<myExample headTitle="BNTang2" context="BNTnag 2 context"/>
<myExample headTitle="BNTang3" context="BNTnag 3 context"/>

过程分析：

总结

• 如何给组件传递数据：通过组件的 properties 属性
• properties 支持的数据类型，String/Number/Boolean/Object/Array/null(不限制类型)