自定义组件

小程序中的自定义组件是一种特殊的页面，它可以在页面中多次使用。

创建自定义组件

在小程序中，自定义组件包含了一个.json文件、一个.wxml文件、一个.wxss文件和一个.js文件。

.json 文件

.json文件用来配置组件的属性、样式和行为。

{
  "component": true,
  "usingComponents": {}
}

component 表示这是一个组件，必须声明为true。

.wxml 文件

.wxml文件用来编写组件的结构。

在.wxml文件中，和普通页面是一样的，表示组件的结构。

.wxss 文件

.wxss文件用来编写组件的样式。

在.wxss文件中，和普通页面是一样的，表示组件的样式。但是，组件的样式只对组件有效，不会影响到页面。

.js 文件

.js文件用来编写组件的行为。

Component({
  properties: {},
  data: {},
  methods: {},
});

在.js文件中，使用Component函数来创建一个组件。properties表示组件的属性，data表示组件的数据，methods表示组件的方法。

使用自定义组件

在页面中使用自定义组件，需要在.json文件中配置usingComponents字段。

{
  "usingComponents": {
    "custom-component": "/components/custom-component/custom-component"
  }
}

usingComponents字段用来配置组件的路径。”custom-component”是组件的名称，”/components/custom-component/custom-component”是组件的路径。通过这种方式，就可以在页面中使用对应的标签来引入组件。

1
2
3

<view>
  <custom-component></custom-component>
</view>

事件和数据传递

在自定义组件中，可以通过properties属性来传递数据，通过triggerEvent方法来触发事件。

首先在构造器中定义properties属性。

Component({
  properties: {
    title: {
      type: String,
      value: "标题",
    },
  },
  data: {},
  methods: {},
});

properties属性中的title表示一个属性，type表示属性的类型，value表示属性的默认值。

type 的值可以是 String、Number、Boolean、Object、Array、null（表示任意类型）。

然后在组件的.wxml文件中使用properties属性。

1 2	<view>{{title}}</view> <view>这是正文</view>

在.wxml文件中，使用{{title}}来引用properties属性。表示显示了一个标题。

在页面中使用组件时，可以直接根据名称传递数据。

1	<custom-component title="这是一个标题"></custom-component>

在页面中使用组件时，可以通过title属性来传递数据。这样，组件中的title属性就会被设置为这是一个标题。

如果需要在组件中触发事件，可以使用triggerEvent方法。

Component({
  properties: {},
  data: {},
  methods: {
    onTap() {
      this.triggerEvent("myevent", { data: "这是一个事件" });
    },
  },
});

在组件的.js文件中，使用triggerEvent方法来触发事件。myevent表示事件的名称，{ data: "这是一个事件" }表示事件的数据。

在页面中使用组件时，可以监听组件的事件。

<view>
  <custom-component title="这是一个标题" bindmyevent="onMyEvent"></custom-component>
</view>

在页面中使用组件时，可以使用bindmyevent来监听组件的事件,也就是使用”bind”关键字加上事件名字。onMyEvent是事件处理函数，写在页面的.js文件中。

Page({
  onMyEvent(event) {
    console.log(event.detail.data);
  },
});

事件选项

在组件中触发事件时，可以传递一些选项。

bubbles：事件是否冒泡，默认为false。
composed：事件是否穿越组件边界，默认为false。
capturePhase：事件是否拥有捕获阶段，默认为false。

Component({
  properties: {},
  data: {},
  methods: {
    onTap() {
      this.triggerEvent(
        "myevent",
        { data: "这是一个事件" },
        { bubbles: true, composed: true, capturePhase: true }
      );
    },
  },
});

捕获和冒泡是事件传递的两个阶段，与 DOM 事件相似。

slot 节点

在小程序的自定义组件中，可以使用slot节点来插入组件的内容。和 Web 开发中的slot类似。

在默认情况下，组件的内容是不可变的。但是，通过slot节点，可以在组件中插入内容。并且只有一个slot节点。

1
2
3

<view>
  <slot></slot>
</view>

当需要使用多个slot节点时，需要在组件的js文件中配置multipleSlots字段。

Component({
  properties: {},
  data: {},
  options: {
    multipleSlots: true,
  },
  methods: {},
});

此时可以通过name属性来区分不同的slot节点。

<view>
  <slot name="header"></slot>
  <slot name="content"></slot>
  <slot name="footer"></slot>
</view>

使用 slot 节点

在页面中使用组件时，可以在组件的标签中插入内容。

<custom-component>
  <view slot="header">这是头部</view>
  <view slot="content">这是内容</view>
  <view slot="footer">这是底部</view>
</custom-component>

注意事项

组件和引用组件的页面不能使用id选择器，属性选择器，标签名选择器。
组件的样式只对组件有效，不会影响到页面。
组件和引用组件的页面如果使用后代选择器有可能会不生效，应该避免使用。
继承样式，如 font 、 color ，会从组件外继承到组件内。
除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。