原生小程序基础5

一、自定义组件

1. 创建组件

通常习惯将组件放到独立的目录 components 当中，这个目录需要我们手动进行创建。在右键在菜单中找到【新建 Component】，输入组件名称后会自动创建组件。

组件和页面的结构基本一致的，但是也有区别：

• 组件的配置文件中配置项 component: true
• 组件的 .js 文件中调用 Component 函数

2. 注册组件

组件的注册分为页面注册和全局注册两种情况：

页面注册是在使用组件的页面配置中通过 usingComponents 进行注册，只能在当前页面中使用注册的组件，如下代码所示：

{
  "usingComponents": {
    "authorization": "/components/authorization/index"
  }
}

<!-- pages/index/index.wxml -->
<!-- 双标签用法 -->
<authorization></authorization>
<!-- 单标签用法(一定要闭合) -->
<authorization />

全局注册是在 app.json 文件中通过 usingComponents 对自定义组件进行注册，注册的组件可以任意页面中使用全局注册的组件，如下代码所示：

{
  "pages": [...],
  "window": {...},
  "usingComponents": {
    "authorization": "/components/authorization/index"
  },
  "sitemapLocation": "sitemap.json"
}

3. 数据与属性

组件的数据由两部分构成：

• data 组件本身内部定义的数据
• properties 通过组件属性从外部传入组件内部的数据（类似 Vue 的 props）

// components/authorization/index
Component({
  // 初始组件内部数据
  data: {
    message: '组件中初始的数据'
  },
  // 定义组件的属性，接收外部传入的数据
  properties: {
    isLogin: {
      type: Boolean,
      value: true,
    },
    tips: String,
  },
})

<authorization is-login="{{false}}" tips="用户未登录"></authorization>

4. 组件模板

4.1 小程序的组件模板其实就是插槽功能，通过 <slot> 在组件内部定义插槽位置，在组件内定定义 slot 插槽，插槽其实就是个占位符号

<authorization is-login="{{true}}" tips="用户未登录">
  <view>这里的内容会填充到 slot 插槽的位置</view>
  <view>这里内容也会填充到 slot 插槽的位置</view>
</authorization>

<view class="container">
  <slot wx:if="{{isLogin}}"></slot>
  <text wx:else>{{message}}</text>
</view>

4.2 默认情况小程序在一个组件中只能支持一个插槽，如果需要多个插槽需要启用多 slot 支持，启用方式如下所示：

Component({
  options: {
    // 启用多插槽支持
    multipleSlots: true
  }
  // ...
})

开启之后可以通过 name 为插槽命名

<view class="container">
  <slot name="content" wx:if="{{isLogin}}"></slot>
  <text wx:else>{{message}}</text>
</view>
<view class="layout">
  ￥<slot name="number"></slot>
</view>

<authorization is-login="{{true}}" tips="用户未登录">
  <view slot="content">
    <view>这里的内容会填充到 slot 插槽的位置</view>
    <view>这里内容也会填充到 slot 插槽的位置</view>
  </view>
  <text slot="number">1000</text>
</authorization>