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 () {
}
}