微信小程序13（自定义组件）

Posted 2021-08-30 晨沉宸辰

自定义组件

• • 1.1. 创建自定义组件
  • • 1.1.1. 声明组件
    • 1.1.2. 编辑组件
    • 1.1.3. 注册组件
  • 1.2. 使用自定义组件

小程序允许我们使用自定义组件的方式来构建页面。

自定义组件

1.1. 创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成

1.1.1. 声明组件

首先需要在 json 文件中进行自定义组件声明

{
  "component": true
}

1.1.2. 编辑组件

同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
    <slot></slot>
</view>

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

1.1.3. 注册组件

在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

1.2. 使用自定义组件

首先要在页面的 json 文件中进行引用声明。还要提供对应的组件名和组件路径

{
	// 引用声明
  "usingComponents": {
  	// 要使用的组件的名称     // 组件的路径
    "component-tag-name": "path/to/the/custom/component"
  }
}