一、父子组件通信
父子组件通信的3种方式：① 属性绑定 ② 事件绑定 ③ 获取组件实例
1、属性绑定
实现父向子传值，并且只能传递普通类型的数据
子组件在 properties 节点中声明对应的属性并使用。
// 父组件的data节点
data:{
num:33
}
// 父组件的WXML结构
<my-test testNum="{
{num}}"></my-test>
// 子组件（test）的JS文件
Component({
properties: {
testNum:Number,
},
})
// 子组件的WXML文件
<view>父组件传递过来的值为：{
{
testNum}}</view>
2、事件绑定
实现子向父传值，可以传任意类型的数据
步骤：
①父组件定义一个函数 → ②父组件WXML通过自定义事件形式引用1中的函数 → ③在子组件中，调用this.triggerEvent('自定义事件名称',{/*参数对象*/})，将数据发送到父组件 → ④在父组件中通过e.detail获取到子组件传递的数据
// 父组件定义函数
addCount(){
console.log(111)
}
// 父组件WXML通过自定义事件引用函数
<my-test bind:addCount="addCount"></my-test>
<my-test bindaddCount="addCount"></my-test>
// 子组件调用this.triggerEvent()方法
<button bindtap="addCount">+1</button>
<view>子向父亲传递数据：{
{
count}}</view>
methods: {
addCount(){
this.setData({
count:this.data.count +1
})
this.triggerEvent("addCount",{
value:this.data.count})
}
}
// 父组件通过e.detail获取数据
addCount(e){
this.setData({
count:e.detail.value
})
}
3、获取组件实例
在父组件里调用 this.selectComponent("id或class选择器") ，获取子组件的实例对象，从而直接访问子组件的任意数据和方法。
// 父组件WXML结构
<my-test2 count = {
{
count}} bind:AddCount="addCount" class=".son"></my-test2>
<button bindtap="getChild">获取子组件实例</button>
// 父组件方法
getChild(){
const child = this.selectComponent('.son');
child.setData({
count:child.properties.count +1
})
child.addCount()
}
二、behavior
behaviors 是小程序中，用于实现组件间代码共享的特性，类似于 Vue.js 中的 “mixins”
1、工作模式
每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。
2、创建behavior
调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象
// behavior.js文件
module.exports = Behavior({
properties:{
},
data:{
},
methods:{
}
})
3、导入并引用behavior
使用 require() 方法导入需要的 behavior，挂载后即可访问 behavior 中的数据或方法
// 在自定义组件的js文件中导入并behavior模块
const myBehavior = require("../../behaviors/behavior");
// 引用behavior
Component({
behaviors:["myBehavior"],
})
4、behavior中所有可用的节点
| 可用的节点 | 类型 | 是否必填 | 说明 |
|---|---|---|---|
properties |
Object Map | 否 | 同组件的属性 |
data |
Object | 否 | 同组件的属性 |
methods |
Object | 否 | 同自定义组件的方法 |
behaviors |
String Array | 否 | 引入其他的behavior |
| created | Function | 否 | 生命周期函数 |
| attached | Function | 否 | 生命周期函数 |
| ready | Function | 否 | 生命周期函数 |
| moved | Function | 否 | 生命周期函数 |
| detached | Function | 否 | 生命周期函数 |
三、自定义tabBar组件
官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
1、配置信息
在 app.json 中的 tabBar 节点中指定 custom 字段
{
"tabBar": {
"custom": true,
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#000000",
"list": [{
"pagePath": "page/component/index",
"text": "组件"
}, {
"pagePath": "page/API/index",
"text": "接口"
}]
},
"usingComponents": {
}
}
2、添加tabBar代码文件
在代码根目录下加入文件 custom-tab-bar
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
3、编写tabBar代码
用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例