自定义组件

介绍和组件模板

关于自定义组件：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

在使用自定义组件的时候，首先需要注意版本问题，基础库要大于等于 1.6.3

在使用自定义组件的时候，一般单独拿一个目录来存放自定义组件，一般是 components

页面中在使用自定义组件时，需要在在 json 文件中进行一个配置，例如：

{
  "usingComponents": {
    "item" : "/components/item/item"
  }
}

不同于页面对应的 JS 文件中的 Page 构造器，在自定义组件中，对应的 JS 文件的构造器为 Component

properties：在使用自定义组件时，父组件传入的属性
data：表示该自定义组件自身的数据
methods：书写对应的事件处理函数
options: 关于自定义组件的选项配置，例如我们要使用多插槽的时候，就需要配置 multipleSlots 为 true
externalClasses：用于指定外部传入的样式类

从开发者工具 1.02.1810190 及以上版本开始，可以在 app.json 中使用 usingComponents 来注册组件，在 app.json 中所注册的组件被视为全局组件，各个页面，以及其他自定义组件中都可以使用。

在设计自定义组件的时候，是可以添加插槽，插槽的用法和 Vue 是非常类似的。

并且和 Vue 中的插槽一样，可以设置具名插槽

定义插槽：

<view class="container">
  <view bindtap="tapHandle">{{name}}</view>
  <slot name="before"></slot>
  <view>{{content}}</view>
  <slot></slot>
  <view>计数器：{{count}}</view>
  <slot name="after"></slot>
</view>

使用自定义组件时，就可以往插槽插入动态的内容

<view class="container">
  <view bindtap="tapHandle">index</view>
  <item content="传入的内容" count="{{count}}" class="my-class"></item>
  <item count="{{count}}">
    <view slot="before">这部分内容会被放入到before</view>
    <view slot="after">这部分内容会被放入到after</view>
    <view>这部分内容会被放入到默认插槽</view>
  </item>
</view>

Component 构造器

App：整个小程序的构造器
Page：页面对应的构造器
Component：自定义组件构造器
- properties：在使用自定义组件时，父组件传入的属性
- data：表示该自定义组件自身的数据
- methods：书写对应的事件处理函数
- options: 关于自定义组件的选项配置，例如我们要使用多插槽的时候，就需要配置 multipleSlots 为 true
- externalClasses：用于指定外部传入的样式类
- lifetimes：生命周期钩子函数，早期的时候，生命周期钩子函数和 Page、App 一样，直接写在配置对象里面，但是后面随着版本的更新，现在推荐写在 lifetimes 配置对象里面，并且写在 lifetimes 里面的优先级是最高的。
- pageLifetimes：组件所在页面的生命周期

实际上，页面也可以被当作是一个自定义组件来使用。

组件之间涉及到数据的传递，和 Vue 是相似的，父传子通过 properties，子传父通过触发父组件的自定义事件来传递，注意在触发父组件的自定义事件时，使用的是 this.triggerEvent 来进行触发的。

可以通过 this.selectComponent('自定义组件的样式类') 来获取自定义组件实例对象

生命周期

在自定义组件中，提供了

created：组件实例刚刚被创建好时，**此时还不能调用 setData 。**通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。有点类似于 Vue 里面的 created
attached：在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发，这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。有点类似于 Vue 里面的 mounted
detached：在组件离开页面节点树后触发，类似于 Vue 里面的 destory

behaviors

这个就类似于 Vue 里面的 mixin，用来提取组件公共的部分（data、method、生命周期钩子）

当我们要定义一个 behavior 的时候，需要用到 Behavior 构造器

Behavior({
  // ...
})

4.2 KiB Raw Blame History Unescape Escape

自定义组件

介绍和组件模板

Component 构造器

生命周期

behaviors

4.2 KiB

Raw Blame History