微信小程序：自定义组件、组件之间的信息传递

官方地址：https://developers.weixin.qq.com/miniprogram/dev/framework/

微信小程序中的自定义组件

自定义组件：通常我们也叫它子组件。为了方便起见，我们把一些可能会重复用到的模块封装成一个可以随时拿来用的“标签”
示例：在index.wxml页面（下称：父页面）中引入自定义组件tips（下称：子组件）
知识点包括：基本子组件的创建引用、父组件向子组件传递数据

步骤：

• 创建子组件文件夹tips
• 该文件中创建四个基本页面（tips.js，tips.json，tips.wxml，tips.wxss）
• 写入对应的组件信息，在组页面中引用

本示例目录结构:

子组件内容

tips.wxml

<view class="inner">
   <view>{{innerText}}</view>
   <view>{{test}}</view>
</view>

tips.js

Component({
   properties: {
     // 这里定义的属性，用于父组件向子组件传递数据使用
     innerText: {
       type: String,
       value: 'default value',   //默认的数据
     }
   },
   // 这里是一些组件内部数据
   data: {
     test:"我是组建内部自身的数据哦"
   },
   //方法列表
   methods: {}
 })

tips.json必须添加配置

{
   "component":true
}

tips.wxss相当于是css文件根据个人情况来

.inner {
   color: red;
}

父页面引用内容：

index.json 引入子组件所在目录

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

index.wxml使用子组件

<tips innerText="Hello World"></tips>

展示效果：

注意点：

• 子组件的tips.js文件中
  properties中定义的属性作用是：父页面向子组件传递数据的
  data中定义的属性作用同页面，是组件自身需要的数据内容

• 如果某页面要作为组件使用，那么该页面的配置文件中component属性值必须为true

• 父页面引用子组件时，可以自定义组件名字（如上例的tips，其值是引入路径）

• 父页面使用子组件时，可以传递参数到子组件（如上例的innerText）,该属性名是根据子组件中properties定义的属性名来决定的。但看官网会发现，属性名写的是inner-text，而调用的时候同样用的是innerText，这是因为有转化规则，如下：

调用子组件时，属性名的转化规则：

innerText——innerText （前后一致的写法不会有特殊变化，小写也一样）
inner-text——innerText （中间加“-”会被转化为驼峰式的写法）

组件与页面之间的数据传递

数据的传递通常不过两种：子向父、父向子

• 父向子：上面已经说了父组件向子组件传递数据是通过在子组件上绑定属性
• 子向父：通过事件绑定。如下

1:子组件tips.wxml添加事件bindtap="onhandleclick"

<view class="inner">
   <view bindtap="onhandleclick">{{innerText}}</view>
   <view>{{test}}</view>
</view>

2:子组件tips.js中传递附带参数传递事件,methods方法列表中添加

methods: {
     onhandleclick:function(){
       var tipsInfo={name:'lily'}
       var myEventOption = {bubbles: false, composed: false}
       this.triggerEvent('handleclick', tipsInfo,myEventOption )
     }
   }

handleclick即为传递的事件名称，后边在index.wxml中接收
3：父页面index.wxml中接收事件

<tips inner-text="Hello World" bind:handleclick="handleclick"></tips>

bind后边的事件名字与子组件js文件中定义的保持一致
4：父页面index.js中接收子组件传递的信息
在Page中添加方法：

handleclick:function(e){
   console.log(`子组件传递的数据：${e.detail.name}`)
},

此处的detail,必须是detail

如上，点击页面中的"Hello World",控制栏就可以拿到"lily"

Ps.当然官方在介绍自定义组件的时候，会有一个slot标签,官方解释说承载组件引用时提供的子节点。这里下一篇说