在我们自定义组件当中，有时候组件的内容也许的通过 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(不限制类型)
