组件模板和样式
组件模板
- 模板数据绑定，向子组件传值
- <slot> 节点，单个slot
- 多个slot
组件样式
- 组件和引用组件的页面，使用class选择器，不能使用id/属性/标签选择器
- 组件和页面，使用后代选择器（.a .b）在一些极端情况下会有非预期的表现
- 继承样式，如 font 、 color ，会从组件外继承到组件内。
- 除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效
组件样式隔离
- 隔离选项 styleIsolation
- isolated 隔离
- apply-shared 页面影响组件
- shared 页面组件相互影响
外部样式类
- externalClasses
引用引用页面或父组件的样式
- 即使启用了样式隔离 isolated ，组件仍然可以在局部引用组件所在页面的样式或父组件的样式
- 在页面中引用组件，使用~
- 在组件中引用组件，使用^
- 注意：如果组件是比较独立、通用的组件，请优先使用外部样式类的方式
虚拟化组件节点
- 希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定
- virtualHost: true
Component 构造器
构造组件
构造页面
- 使用 Component 构造器来构造页面的一个好处是可以使用 behaviors 来提取所有页面中公用的代码段
组件间通信与事件
组件间通信
- WXML 数据绑定：用于父组件向子组件的指定属性设置数据
- 事件：用于子组件向父组件传递数据，可以传递任意数据
- 通过 this.selectComponent 方法获取子组件实例对象，可以直接访问组件的任意数据和方法
监听事件
- 自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件
<component-tag-name bindmyevent="onMyEvent" />
触发事件
- 自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事
件选项
this.triggerEvent('myevent', myEventDetail, myEventOption)
- 触发事件的选项包括：bubbles，composed，capturePhase
获取组件实例
- 可在父组件里调用 this.selectComponent ，获取子组件的实例对象
const child = this.selectComponent('.my-component')
- 父组件将会获取 class 为 my-component 的子组件实例对象，即子组件的 this
- 若需要自定义 selectComponent 返回的数据，可使用内置 behavior: wx://component-export
Component({
behaviors: ['wx://component-export'],
export() {
return { myField: 'myValue' }
}
})
组件生命周期
组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
其中，最重要的生命周期是 created attached detached
定义组件生命周期
- 生命周期方法可以直接定义在 Component 构造器的第一级参数中。
- 组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。
- 可用的全部生命周期 created attached ready moved detached error
组件所在页面的生命周期
- pageLifetimes 定义段中定义。其中可用的生命周期包括 show hide resize
behaviors
组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用
组件中使用
var myBehavior = require('my-behavior')
Component({
behaviors: [myBehavior],
properties: {
myProperty: {
type: String
}
同名字段的覆盖和组合规则
- 后执行覆盖先执行
- 生命周期函数不会相互覆盖，而是在对应触发时机被逐个调用，如果同一个 behavior 被一个组件多次引用，它定义的生命周期函数只会被执行一次
内置 behaviors
组件间的关系 relations
数据监听器
- 数据监听器监听的是 setData 涉及到的数据字段，即使这些数据字段的值没有发生变化，数据监听器依然会被触发
- 如果在数据监听器函数中使用 setData 设置本身监听的数据字段，可能会导致死循环
