小程序系列3-自定义组件
方便自己学习和记录,如果错误,欢迎指正。
文章目录
一、全局组件和页面组件
1、全局组件
全局组件定义在根目录components文件夹下。
右键新建文件夹test,在test文件夹下,右键新建Component,
便自动生成4个文件。test.js/test.json/test.wxml/test.scss
在根目录app.js里声明test全局组件:
"usingComponents": {
"test": "/components/test/test"
},
2、页面组件
比如在pages/index文件夹下创建页面组件
右键新建文件夹index-swiper,在index-swiper文件夹下,右键新建Component,
便自动生成4个文件。index-swiper.js/index-swiper.json/index-swiper.wxml/index-swiper.scss
在index.json里声明index-swiper组件:
"usingComponents": {
"index-swiper": "./index-swiper/index-swiper"
},
二、组件生命周期
1. 组件本身的生命周期
代码如下(示例):
Component({
lifetimes:{
created() {
console.log('组件刚刚被创建')
},
attached() {
console.log("在组件实例dom产生时执行")
},
ready() {
console.log('组件在dom渲染完成后执行')
},
detached () {
console.log('在组件dom结构被销毁时执行')
}
}
})
2.组件所在页面的生命周期
从前台进入后台,或者在路由跳转后,组件所在页面没有被关闭,只是隐藏了,会触发show();
再次切换页面或者从后台进入前台,会触发hide()
代码如下(示例):
Component({
pageLifetimes:{
show() {
console.log('组件所在页面显示')
},
hide() {
console.log('组件所在页面隐藏')
}
}
)}
三、组件直接通信
1、父传子
父组件index中,使用index-swiper组件
<index-swiper name="{{name}}"></index-swiper>
父组件传进来的值会在子组件的properties里
<text>{{name}}</text>
<button bind:tap="changeName">改值</button>
properties: {
// name: String // 简写
name: {
type: String,
value:'lisi'
}
}
2、子传父
子组件
<text>{{name}}</text>
<button bind:tap="changeName">改值</button>
Component({
methods: {
changeName() {
this.setData({
name:'李四' // 直接修改父组件传进来的值,不推荐
})
this.triggerEvent("getName", '李四') // 推荐
}
},
)}
父组件
<index-swiper name="{{name}}" bind:getName="getName"></index-swiper>
Page({
getName(event) {
let {detail:value} = event
this.setData({
name: value
})
}
)}
3、slot使用
父组件
<index-swiper>
<slot name="slot1"></slot>
<slot></slot>
<slot name="slot2"></slot>
</index-swiper>
子组件
<view slot="slot1">slot1</view>
<view>默认</view>
<view slot="slot2">slot2</view>
4、获取组件实例
this.selectComponent获取子组件实例对象
父组件
<index-swiper class="index-swiper"></index-swiper>
onReady: function () {
console.log('onReady 页面渲染完成')
const child = this.selectComponent(".index-swiper")
console.log(child.data)
},
四、监控组件中data值的变化
单个值的变化
observers:{
check: (v)=>{
console.log('@@@@'+v)
}
},
多个值的变化
'name,check':(nameNew,checkNew)=>{
console.log(nameNew, checkNew)
}
五、behaviors-组件代码共享
behaviors就是代码复用,类似hooks
在组件文件里新建behavior.js
let behavior = Behavior({
data: {
name:'哈哈哈'
},
methods: {
},
lifetimes :{
}
})
export default behavior
在子组件js中引用并注册
import behavior from './behavior'
Component({
behaviors:[behavior],
})