赞
踩
① 在项目的根目录中,鼠标右键,创建 components -> test 文件夹
② 在新建的 components -> test 文件夹上,鼠标右键,点击“新建 Component”
③ 键入组件的名称之后回车,会自动生成组件对应的 4 个文件,后缀名分别为 .js,.json, .wxml 和 .wxss
组件的引用方式分为全局引用
和局部引用
// 在页面的.json文件中引入组件
{
"usingComponents": {
"my-test":"/components/test/test"
}
}
// 在页面的.WXML文件中,使用组件
<my-test></my-test>
① 组件的 .json文件中需要声明"component":true
属性
② 组件的 .js文件中调用的是Component()
函数,页面的 .js文件中调用的是Page()
函数
③ 组件的事件处理函数需要定义到methods
节点中
自定义组件的样式只对当前组件生效,不会影响到组件之外的UI 结构
① app.wxss 中的全局样式对组件无效
② 只有 class 选择器会有样式隔离效果,id 选择器、属性选择器、标签选择器不受样式隔离的影响
注意:在组件
和引用组件的页面
中建议使用 class 选择器,不要使用 id、属性、标签选择器
!
可以通过styleIsolation属性
修改组件的样式隔离选项
// 方法一:在组件的.js文件中新增如下配置
Component({
options:{
styleIsolation:'isolated'
},
})
// 方法二:在组件的.json文件中新增如下配置
{
styleIsolation:'isolated'
}
可选值 | 说明 |
---|---|
isolated(默认值) | 开启样式隔离 ,在自定义组件内外,使用class指定的样式不会相互影响 |
apply-shared | 页面WXSS样式可以影响自定义组件 ,但自定义组件的WXSS样式不会影响到页面 |
shared | 页面WXSS样式可以影响到自定义组件,自定义组件WXSS中指定的样式也会影响页面和其他设置了apply-shared 或 shared 的自定义组件 |
用于组件模板渲染的私有数据
,需要定义到 data 节点
中
Component({
data:{
sum:0
}
})
事件处理函数
和自定义方法
需要定义到 methods 节点
中
Component({
methods:{
addCount(){
console.log(this.data.sum)
}
}
})
properties 属性用来接收外界传递到组件中的数据
Component({
properties:{
// 方法一:完整定义属性的方式
sum:{
type:Number,
value:100
},
// 方法二:简化定义属性方式
num:Number
}
})
// 外界组件传递max的值为10
<my-test max="10"></my-test>
① data 数据和 properties 属性在本质上没有任何区别,两者都是可读可写
的
② data 更倾向于存储组件的私有数据
③ properties 更倾向于存储外界传递到组件中的数据
<view>max属性的值为:{{max}}</view>
Component({
properties:{
max:Number,
},
methods:{
addCount(){
this.setData({
max:this.properties.max + 1
})
}
}
})
类似于 vue 中的watch 侦听器,用于监听和响应任何属性和数据字段的变化,从而执行特定的操作
Component({
observers:{
"字段A,字段B" : function(字段A的新值,字段B的新值) {
// 处理逻辑
}
}
})
数据监听器支持监听对象中单个或多个属性的变化
Component({
observers:{
"对象.属性A,对象.属性B" : function(属性A的新值,属性B的新值) {
// 处理逻辑
}
}
})
如果某个对象中需要被监听的属性太多,为了方便,可以使用通配符 **
来监听
对象中所有属性
的变化
observers:{
"对象.**" : function(obj) {
// 处理逻辑
}
}
// 组件的.WXML文件代码 <view>{{n1}} + {{n2}} = {{sum}}</view> <button bindtap="add1">n1自增</button> <button bindtap="add2">n2自增</button> // 组件的.js文件代码 Component({ data: { n1:0, n2:3, sum:0 }, methods: { add1(){ this.setData({ n1:this.data.n1 +1 }) }, add2(){ this.setData({ n2:this.data.n2 +5 }) } }, observers:{ 'n1,n2':function(n1,n2){ this.setData({ sum:n1+n2 }) } } })
纯数据字段是指不用于界面渲染的data字段
应用场景:在一些情况下,某些data中的字段既不会展示到页面,也不会传递给其他组件,仅在自身组件内部使用,这些data字段可以设置为纯数据字段
好处:有助于提升页面更新的性能
在options节点
中,指定pureDataPattern属性
为一个正则表达式
Component({
options:{
// 指定所有以_开头的数据字段为纯数据字段
pureDataPattern:/^_/
}
})
插槽主要用于承载组件使用者提供的WXML结构,在自定义组件的WXML结构中使用<slot>
节点表示
在小程序中,默认每个自定义组件中只允许使用一个 <slot>
进行占位
<!-- 组件的封装者 -->
<view>
<view>这里有一个插槽</view>
<slot></slot>
</view>
<!-- 组件的使用者 -->
<component-tag-name>
<view>这是插入到组件slot中的内容</view>
</component-tag-name>
在options节点
中,指定multipleSlots属性
为的值为true
即可启用多个插槽
Component({
options:{
// 启用多个插槽
multipleSlots: true
}
})
可以在 <slot>
标签中通过 name属性
来区分不同的插槽
<view>
<slot name="before"></slot>
<slot name="after"></slot>
</view>
使用slot属性
将节点插入到不同的<slot>
中
<component-tag-name>
<view slot="before">这是插入到组件slot-before中的内容</view>
<view slot="after">这是插入到组件slot-after中的内容</view>
</component-tag-name>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。