1.组件wxml的slot-插槽
- 在使用基础组件时,可以在组件中间写子节点,从而将子节点内容展示到页面中,自定义组件也可以接收子节点
- 但是要在组件模板中定义节点,承载组件中间的子节点
- 需要使用多个插槽时,要在组件.js中声明启用,同时给slot添加name属性来区分不同的slot(具名插槽)
- 然后给子节点内容添加slot属性,属性值是对应的slot的name名称,来将内容插入对应的slot中。
label和slot中的内容可以二选一
.js中的代码
Component({
option: {
multipleSlot: true
},
}
页面page
<custom01>
<text slot="slot-top">我要显示到顶部</text>
我是子节点内容
<text slot="slot-bottom">我要显示到底部</text>
</custom01>
components组件
<view>
<slot name="slot-top" />
<!-- slot就是用来接收、承接子节点的内容 -->
<!-- slot只是一个占位符,子节点内容会将slot进行替换 -->
<view><slot /></view>
<slot name="slot-bottom" />
</view>
2.组件样式及注意事项
自定义组件拥有自己的 wxss 样式,组件 wxss 文件的样式,默认只对当前组件生效
编写组件样式时,需要注意以下几点:
- app.wxss 或页面的 wxss 中使用了标签名(view)选择器(或一些其他特殊选择器)来直接指定样式
这些选择器会影响到页面和全部组件,通常情况下这是不推荐的做法 - 在自定义的wxss文件中,不允许使用标签、ID、属性选择器,只能用class选择器
- 组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用
- 子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。
- 继承样式,如 font 、 color ,会从组件外继承到组件内。
- 除继承样式外, 全局中的样式、组件所在页面的的样式对自定义组件无效 (除非更改组件样式隔离选项)
3.组件样式隔离
自定义组件的样式只受自身 wxss 的影响,但是有时候我们需要组件使用者的样式能够影响到组件,这时候就需要指定特殊的样式隔离选项 styleIsolation。
有以下取值:
- isolated:表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值)
- apply-shared:表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面
- shared:表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。
options: {
// isolated开启样式隔离,是默认值
//apply-shared组件使用者样式能够影响到自定义组件本身,反之不行
// shared表示组件使用者、页面的wxss样式能够影响到自定义组件,反之也可以
styleIsolation: "shared"
},
4.小程序修改checkbox样式
5.数据监听器-observers
数据监听器主要用于监听和响应任何属性(properties)和数据(data)的变化,数据变化时 就会发生回调函数,方便开发者进行业务逻辑处理。
数据监听需要使用-observers字段
Component({
/**
* 组件的属性列表
*/
properties: {
label: {
type: String,
value: "测试"
}
},
/**
* 组件的初始数据
*/
data: {
num:10,
count: 100,
obj: { name: 'tom', age: 10 },
arr: [1, 2, 3]
},
// 用来监听数据以及属性是否发生了变化
observers: {
// key:需要监听的数据
// value:回调函数,形参:最新的数据
num: function(newNum) {
// 对data中数据进行监听,如果数据没有发生,监听器不会执行
console.log(newNum)
},
// 同时监听多个数据
'num, count': function(newNum, newCount) {
console.log(newNum, newCount);
},
// 支持监听属性以及内部数据的变化
"obj.name": function(newName) {
console.log(newName);
},
"arr[1]": function(newArr) {
console.log(newArr);
},
// 监听对象中所有属性变化
// 用通配符
"obj.**": function(newObj) {
console.log(newObj);
},
// 与data中不同,只要组件使用者传递了数据,监听器中就能获取数据
"label": function(newLabel) {
console.log(newLabel);
}
},
/**
* 组件的方法列表
*/
methods: {
// 更新数据
updateData () {
this.setData({
num: this.data.num + 1,
count: this.data.count - 1,
'obj.name': 'jerry',
'arr[1]': 666,
'label': "最新的标题"
})
}
}
})
6.组件通信-父组件传值
- 在父组件WXML中使用数据绑定的方式向子组件传递动态数据
- 子组件内部使用properties接收父组件传递的数据即可
observers: {
// 如过需要properties中的数据赋值给data
// 可以使用 observers进行处理
checked: function(newChecked) {
this.setData({
isChecked: newChecked
})
}
}
7.组件通信-子往父传值
- 自定义组件内部使用triggerEvent方法发射一个自定义的事件,同时可以携带数据
- 自定义组件标签通过bind方法监听发射的事件,同时绑定事件处理函数,在事件处理函数中通过事件对象获取传递的数据
methods: {
// 将数据传递给子组件
sentData () {
// 如果需要将数据传递给父组件
// 需要用triggerEvent发射自定义事件
this.triggerEvent('myevent', this.data.num)
}
}
<!-- 需要在自定义组件标签上通过bind方法绑定自定义事件,同时绑定事件处理函数 -->
<view>{{ num }}</view>
<custom05 bind:myevent="getData" />
data: {
num : ''
},
getData (event) {
console.log(event);
// 可以通过事件对象.detail获取子组件传递给父组件的数据
this.setData({
num: event.detail
})
},
<button plain type="primary" bindtap="sentData">传递数据</button>
8.获取组件实例
父组件通过this.selectComponent方法,获取子组件实例对象,这样就可以访问子组件的任意数据和方法
this.selectComponent方法在调用时需要传入一个匹配选择器selector
getChild () {
const res = this.selectComponent('.child')
console.log(res);
}
9.组件生命周期
- 组件生命周期:指组件自身的一些钩子函数,函数在特定的时间节点被触发
- 函数要在lifetimes字段内进行声明
- 有5个:created, attached, ready, moved, detached
Component({
lifetimes: {
// 组件实例被创建好以后执行
// 在组件实例刚刚被创建时执行,注意此时不能调用 setData
created () {},
// 组件被初始化完毕,模板解析完成,已经把组件挂载到页面上
attached () {
// 一般页面中的交互会在attached钩子函数中进行
this.setData({
})
},
// 组件被销毁
detached () {},
ready () {},
moved () {}
}
})
10.组件所在页面的生命周期
- 组件中还有一些特殊的生命周期,其与组件没有很强的关联
- 主要用于组件内部监听父组件的展示、隐藏状态、从而方便组件内部执行一些业务逻辑的处理
- 共四个:show, hide, resize, routeDone, 要在pageLifetimes中声明
pageLifetimes: {
// 监听组件所在页面展示(后台切前台)状态
show () {
},
// 监听组件所在页面隐藏(前台切后台,点击tabbar)状态
hide () {
}
}