自定义小程序组件
局部引用在页面的json文件中引用的方式叫局部引用.
{
{
"usingComponents": {
"test1":"/components/test/test"
},
"enablePullDownRefresh": true,
"backgroundColor": "#ffffff",
"backgroundTextStyle": "dark"
}
}
//使用
<test1></test1>
在app.json中引用组件就是全局引用
"usingComponents": {
"test":"/components/test/test"
}
properties: {
// 对外暴露的属性
max:{
type: Number,
value: 10
}
},
methods: {
addCount() {
if (this.data.count >= this.properties.max) {
return
}
this.setData({count: this.data.count + 1})
wx.showToast({
title: '数字' + this.data.count,
})
}
}
<view>
{{n1}} + {{n2}} = {{sum}}
</view>
<button bindtap="addN1">n1 + 1</button>
<button bindtap="addN2">n2 + 1</button>
observers:{
// 监听数据节点
'n1, n2': function (n1, n2) {
// 监听n1,n2的数据变化
this.setData({sum: n1 + n2})
}
}
methods: {
addN1() {this.setData({n1:this.data.n1 + 1})},
addN2() {this.setData({n2:this.data.n2 + 1})},
}
data: {
count: 0,
n1:0,
n2:0,
sum:0
},
data: {
count: 0,
n1:0,
n2:0,
sum:0,
rgb:{
r:0,
g:0,
b:0
},
fullColor: '0,0,0'
},
methods: {
addN1() {this.setData({n1:this.data.n1 + 1})},
addN2() {this.setData({n2:this.data.n2 + 1})},
changeR(){
this.setData({'rgb.r':this.data.rgb.r + 5 > 255 ? 255:this.data.rgb.r+5})
},
changeG(){
this.setData({'rgb.g':this.data.rgb.g + 5 > 255 ? 255:this.data.rgb.g+5})
},
changeB(){
this.setData({'rgb.b':this.data.rgb.b + 5 > 255 ? 255:this.data.rgb.b+5})
},
observers:{
// 监听数据节点
'n1, n2': function (n1, n2) {
// 监听n1,n2的数据变化
this.setData({sum: n1 + n2})
},
//监听对象
'rgb.r, rgb.g, rgb.b': function (r, g, b) {
this.setData({fullColor:`${r},${g},${b}`})
}
//可以换种写法
'rgb.**': function (rgb) {
this.setData({fullColor:`${rgb.r},${rgb.g},${rgb.b}`})
}
}
lifetimes:{
attached(){},
detached(){}
},
// 在组件中监听页面的生命周期函数
pageLifetimes:{
// 页面被展示
show:function(){},
// 页面被隐藏
hide:function(){},
// 页面尺寸变化
resize:function(){}
},
options:{
// 启用多个插槽
multipleSlots: true
},
<view class="colorBox">
<!-- 单个插槽不需要name来区分 -->
<slot name="slot1"></slot>
<slot name="slot2"></slot>
</view>
//使用
<test2>
<text slot="slot1">张凯强</text>
<!-- <text slot="slot2">徐 蓉彬</text> -->
</test2>
<!-- 父组件通过属性向子组件传值 -->
<test2 count="10">
</test2>
properties: {
count:Number
},
子组件向父组件传值的话。需要事件绑定
// 第一步在父组件的js文件中自定义一个函数，这个函数将通过自定义时间的形式传递给子组件
syncCount() {
// 第4步，在父组件内部通过e.detail接受数据
console.log(e.detail)
this.setData({
count: e.detail.value
})
}
<!-- 第二步在父组件的wxml文件中通过自定义时间的形式。讲步骤一中的函数引用传递给子组件 -->
<test2 count="10" bind:sync="syncCount">
</test2>
methods: {
// 第三步，在子组件内部js中通过调用以下方法将数据发送到父组件
addCount() {
this.setData({
count: this.properties.count + 1
})
this.triggerEvent('sync', {value:this.properties.count})
}
}
<!-- 自定义组件，父子之间的通信 -->
<!-- 获取组件的实例对象，需要给子组件一个类选择器或者是id选择器 -->
<test2 count="{{100}}" bind:sync="syncCount" class="custom1" id="c1"></test2>
<button bindtap="getChild">获取子组件实例</button>
getChild(e){
// 通过类选择器或者是id选择器获取子组件的实例
// const child = this.selectComponent(".custom1")
const child = this.selectComponent("#c1")
// 调用子组件的set方法
child.setData({count:child.properties.count + 1})
// 调用子组件的addCount方法
child.addCount()
}
知道小程序组件中behaviors的作用
behaviors 是实现组件间代码共享的特性。
behaviors是包含一组属性，数据，生命周期函数和方法。组件引用的时候。他的属性数据和方法会被合并到组件中.每个组件可以引用多个behavior。同时behavior也可以引用其他behavior
module.exports = Behavior({
//私有数据节点
data:{
},
// 私有数据节点
properties:{},
// 事件处理函数，自定义方法的节点
methods:{}
})
//在组件中使用require方法导入需要的behavior
const myBehavior = require("../../behaviors/my-behavior")
Component({
// 将导入的behavior对象挂载到behaviors数组节点中即可生效
behaviors:[
myBehavior
],
