学习小程序--自定义组件

组件模板和样式

组件模板

• 模板数据绑定，向子组件传值
• 节点，单个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 方法获取子组件实例对象，可以直接访问组件的任意数据和方法

监听事件

• 自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件

触发事件

• 自定义组件触发事件时，需要使用 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 设置本身监听的数据字段，可能会导致死循环