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 文件的样式，默认只对当前组件生效

编写组件样式时，需要注意以下几点：

1. app.wxss 或页面的 wxss 中使用了标签名（view）选择器（或一些其他特殊选择器）来直接指定样式
   这些选择器会影响到页面和全部组件，通常情况下这是不推荐的做法
2. 在自定义的wxss文件中，不允许使用标签、ID、属性选择器，只能用class选择器
3. 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用
4. 子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
5. 继承样式，如 font 、 color ，会从组件外继承到组件内。
6. 除继承样式外， 全局中的样式、组件所在页面的的样式对自定义组件无效 (除非更改组件样式隔离选项)

3.组件样式隔离

自定义组件的样式只受自身 wxss 的影响，但是有时候我们需要组件使用者的样式能够影响到组件，这时候就需要指定特殊的样式隔离选项 styleIsolation。

有以下取值：

1. isolated：表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）
2. apply-shared：表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
3. 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.组件通信-父组件传值

1. 在父组件WXML中使用数据绑定的方式向子组件传递动态数据
2. 子组件内部使用properties接收父组件传递的数据即可

observers: {// 如过需要properties中的数据赋值给data// 可以使用 observers进行处理checked: function(newChecked) {this.setData({isChecked: newChecked})}}

7.组件通信-子往父传值

1. 自定义组件内部使用triggerEvent方法发射一个自定义的事件，同时可以携带数据
2. 自定义组件标签通过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: {// 组件实例被创建好以后执行// 在组件实例刚刚被创建时执行，注意此时不能调用 setDatacreated () {}, // 组件被初始化完毕，模板解析完成，已经把组件挂载到页面上attached () {// 一般页面中的交互会在attached钩子函数中进行this.setData({})}, // 组件被销毁detached () {},ready () {}, moved () {}}
})

10.组件所在页面的生命周期

• 组件中还有一些特殊的生命周期，其与组件没有很强的关联
• 主要用于组件内部监听父组件的展示、隐藏状态、从而方便组件内部执行一些业务逻辑的处理
• 共四个：show, hide, resize, routeDone, 要在pageLifetimes中声明

pageLifetimes: {// 监听组件所在页面展示（后台切前台）状态show () {},// 监听组件所在页面隐藏（前台切后台，点击tabbar）状态hide () {}}