自定义组件
组件的全局引用与局部引用
全局引用：在app.json文件中设置usingComponents
"pages":"省略...",
"usingComponents": {
//"自己取的组件名"："路径"
"my-test2":"/components/test2/test2"
}
局部引用：在页面的json文件中设置usingComponents，设置同全局引用一致
组件的使用
引用后只需要在页面的wxml中用所取的组件名作为标签使用即可
//homt.wxml
<my-test2></my-test2>
组件中的方法
组件的事件处理函数需要定义到methods节点中
自定义的方法一般需要以_开头
methods: {
//事件
addCount(){
if (this.data.count>=this.properties.max) return
this.setData({
count:this.data.count+1
})
this._showCount()
},
//自定义方法
_showCount(){
wx.showToast({
title: 'count是' + this.data.count,
icon:'none'
})
}
}
组件中的样式
组件中的样式具有隔离性，当样式使用类选择器时组件样式与页面样式互不影响。用其他的选择器如标签选择器或ID选择器时页面样式会影响组件中的样式。
可以在组件的js文件中配置Component，将options里的styleIsolation设置为：isolated表示隔离。这也是默认选项。
还可以设置为apply-shared,此时页面样式将可以影响组件样式，组件样式则不能影响页面样式。
或设置为shared，此时页面样式与组件样式之间可以互相影响。
Component({
options:{
styleIsolation:"isolated"
},
})
组件中的data与properties
类似于vue中的data和props
data用于存储组件内的私有数据，properties用于存储外界传入组件内的数据。但是data和properties都可以通过this.setData来进行修改，读取时data内的数据用this.data.x获取，而properties里的数据用this.properties.x获取
组件中的数据监听器
普通数据监听
observers:{
//需要监听的字段：回调，第n个参数是第n个监听字段修改后的新值
'n1,n2':function(newN1,newN2){
//监听到变化后可以做一些事
this.setData({
sum:this.data.n1+this.data.n2
})
}
}
对象类型数据监听
observers:{
// 通过对象.属性名的方式将需要监听的属性包裹在同一个字符串中用，隔开
// 'rgb.r,rgb.g,rgb.b':function(r,g,b){
// this.setData({
// fullColor:`${r},${g},${b}`
// })
// }
//可以通过对象.**通配符的方式实现对某个对象所有属性的监听，简化写法
'_rgb.**':function(obj){
this.setData({
fullColor:`${obj.r},${obj.g},${obj.b}`
})
}
}
配置纯数据字段
通过在component中options里的pureDataPattern配置一个正则表达式，将所有符合正则表达式的数据配置为纯数据字段。
Component({
options:{
//此正则表达式将所有以_开头的数据配置为纯数据字段
pureDataPattern:/^_/
},
}
组件的重要生命周期
组件自身的生命周期
created:组件实例被创建完毕时执行
attached:组件实例进入节点树时执行，一般在这个生命周期中发送网络数据请求
detached:组件实例从节点树中被移除时执行
定义组件生命周期：Lifetimes
组件所在页面的生命周期
show:所在页面展示的时候
hide:所在页面隐藏的时候
resize:所在页面尺寸发生变化的时候
定义所在页面生命周期：pageLifetimes
pageLifetimes:{
show(){
console.log('show');
},
hide(){
console.log('hide');
},
resize(){
console.log('resize');
}
}
自定义组件的插槽
在组件内部通过slot标签占位，在组件使用的时候在内部写入一些代码展示在组件中slot插槽的位置
//组件内部
<slot></slot>
<view>组件内部</view>
//组件使用者
<my-test4>
<view>slot展示的内容</view>
</my-test4>
默认情况下只能使用一个插槽，组件内部只能有一个slot标签。
通过配置组件js文件中Component的options，将multipleSlots设置为true开启多插槽。
Component({
options:{
multipleSlots:true
},
})
在组件内部给不同slot标签设置不同的name，然后在使用的时候给不同的view设置不同的slot对应name即可
<slot name="before"></slot>
<view>组件内部</view>
<slot name="after"></slot>
<my-test4>
<view slot="before">before</view>
<view slot="after">after</view>
</my-test4>
组件通信
使用属性绑定实现父向子组件传递数据
通过在组件标签中用属性传递数据（只能传递普通数据）
//页面的wxml文件
//将页面自己的count传递给子组件并命名为count
<my-test5 count="{{count}}"></my-test5>
//组件的js文件
Component({
/**
* 组件的属性列表
*/
properties: {
//自组件通过properties接收数据
count:Number
},
})
//组件的wxml文件
<view>从页面接收到的count:{{count}}</view>
通过自定义事件实现子向父传递数据
首先在页面中定义需要传递的方法
//页面的js文件
syncCount(e){
this.setData({
//通过e.detail接收传递过来的参数
count:e.detail.value
})
},
//页面的wxml文件，通过bind:自组件中触发的名字=“js中定义的方法”
<my-test5 count="{{count}}" bind:sync="syncCount"></my-test5>
//组件的js文件中，通过 this.triggerEvent('触发的事件名',{需要传入的数据}) 传递数据
methods: {
addCount(){
this.setData({
count:this.properties.count+1
})
this.triggerEvent('sync',{value:this.properties.count})
}
}
使用selectComponent获取组件实例
//在页面wxml文件中为组件标签设置id或者class选择器
<my-test5 count="{{count}}" bind:sync="syncCount" class="customA" id="cA"></my-test5>
//在页面js文件中通过页面实例的selectComponent方法获取组件实例
getChild(){
const child=this.selectComponent('.customA')
// child.setData({
// count:child.properties.count+1
// })
//调用组件中的方法
child.addCount()
},
behaviors：实现组件间的代码共享
类似于vue中的mixins混入
//在behavior文件夹中创建一个js文件，用behavior()构造并暴露出去
module.exports=Behavior({
data:{
name:"zhangsan"
},
properties:{
},
methods:{
}
})
// components/test5/test5.js
//通过require引入需要的behavior
const myBehavior=require('../../behaviors/my-behaviors')
//在组件实例化的配置中放入引入的behavior
Component({
behaviors:[myBehavior],
})
