小程序中如何自定义组件
目标:掌握自定义组件的基本用法
01基本使用
1.创建组件
2.注册
分为页面注册和全局注册
页面注册在使用组件的页面配置(xxx.json文件)中通过usingComponents 进行注册
全局注册在app.json文件中通过usingComponents 进行注册
"usingComponents": {
"my-test": "/components/MyTest/index"
}
02组件样式
03组件样式-外部样式类
04数据方法
data数据
定义数据:用于组件模板渲染的私有数据,需要定义到data
Component({
data: {
num: 100
}
});
methods方法
定义:事件处理函数和自定义方法需要定义到methods中
Component({
methods: {
handleAdd() {
this.setData({
num: this.data.num + 1
});
},
handleSub() {
this.setData({
num: this.data.num - 1
});
}
}
});
06组件插槽
掌握自定义组件中插槽的使用方式
什么是插槽?
在自定义组件的wxml结构中,我们可以提供一个节点,用于承载组件使用者提供的wxml结构。插槽可以方便开发者将不确定的、或者希望由用户去确定的交给用户去处理。
单个插槽
<!--components/MyTest2/index.wxml-->
<view>
<text>components/MyTest2/index.wxml</text>
<!-- 对于不确定的内容,可以使用slot进行占位,具体内容交给使用者确定 -->
<slot></slot>
</view>
多插槽(具名插槽)
默认情况下,一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时,可以在组件 .js(不是在配置文件中) 中声明启用。
05生命周期-lifetimes
组件的生命周期,是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
06 属性-properties
在小程序中,properties是组件的对外属性,用于接收外界传递到组件中的数据,示例如下:
Component({
properties: {
isOpen: Boolean,
min: Number, // 直接写类型
max: { // 写类型 + 初始值
type: Number,
value: 10 // value用于指定默认值
}
}
})
07组件通讯
从父组件传值到子组件
<my-test isOpen max="9" min="1" />
<my-test isOpen="{{true}}" max="9" min="1" />
<my-test isOpen="{{false}}" max="9" min="1" />
<my-test isOpen="false" max="9" min="1" />
从子组件传值到父组件