【愚公系列】《微信小程序与云开发从入门到实践》030-关于自定义组件的高级用法

🚀前言

在微信小程序的开发中，自定义组件是实现灵活、可复用代码的重要工具。随着小程序生态的不断发展，开发者对于组件的需求也日益增长，从基础的组件使用到高级的技巧与模式，掌握自定义组件的高级用法已成为提升开发效率和用户体验的关键所在。

本文将深入探讨微信小程序中自定义组件的高级用法，包括组件之间的通信、生命周期管理、插槽机制、样式封装等内容。我们将通过实际案例和最佳实践，帮助您更好地理解和应用这些高级功能，从而为您的项目带来更高的灵活性和可维护性。

无论您是希望优化已有小程序的开发者，还是渴望学习新技术的爱好者，相信本文都将为您提供丰富的知识和实用的技巧，让您在小程序开发的道路上走得更远、更稳。

让我们一起深入探索，让自定义组件的高级用法为您的开发之旅增添无限可能！

🚀一、关于自定义组件的高级用法

目前我们已经对自定义组件的使用有了大致的体验，其实关于自定义组件，还有许多高级的特性供开发者进行使用，本节将向大家介绍这些特性。

🔎1.自定义组件的模板和样式

🦋1.1 自定义组件的 WXML 和 WXSS 文件

☀️1.1.1 WXML 文件

• WXML 文件用于定义组件的模板，描述组件内部的结构。
• 组件的模板可以使用插槽（<slot> 标签），插槽类似于接口，允许组件的使用方向组件中传入内容。

☀️1.1.2 WXSS 文件

• WXSS 文件用于定义组件的样式。组件内的样式只会作用于组件内部的元素，而不会影响外部页面或其他组件。
• 在编写组件的 WXSS 样式时，需要注意以下几点：
  • 不使用：ID选择器、属性选择器和标签名选择器，推荐使用类选择器。
  • 避免使用：子选择器和后代选择器，因为某些情况下会导致异常。
  • 组件样式有继承关系，外部样式可以影响组件，组件的样式也会影响内部元素。

🦋1.2 插槽的使用

插槽是一种允许外部内容插入组件的机制。组件可以通过插槽定义一个或多个内容区，从而使得组件更加灵活。

☀️1.2.1 默认插槽

• 插槽没有指定名称时，被称为“默认插槽”。
• 默认插槽会接收组件标签内部的内容，并把它插入到 <slot> 标签所在的位置。

示例：

<!-- component1.wxml -->
<view>
  <view style="text-align: center;">{
  {title}}</view>
  <slot></slot> <!-- 默认插槽 -->
</view>

<!-- 使用组件时 -->
<component1 title="按钮">
  <button type="primary" size="mini">按钮1</button>
</component1>

在这个示例中，<button> 标签会被插入到 <slot></slot> 标签的位置。

☀️1.2.2 具名插槽

• 如果需要多个插槽，可以通过设置 options: { multipleSlots: true } 来启用多插槽功能。
• 每个插槽都可以通过 name 属性进行命名，以区分不同插槽的位置。

示例：

<!-- component1.wxml -->
<view>
  <view style="text-align: center;">{
  {title}}</view>
  <slot></slot> <!-- 默认插槽 -->
  <view style="display: flex; flex-direction: row; justify-content: space-between;">
    <slot name="left"></slot>  <!-- 左侧插槽 -->
    <slot name="right"></slot> <!-- 右侧插槽 -->
  </view>
</view>

<!-- 使用组件时 -->
<component1 title="按钮组">
  <button type="primary" size="mini">按钮1</button>
  <button type="primary" size="mini">按钮2</button>
  <button type="primary" size="mini">按钮3</button>
  <view slot="left">左视图</view> <!-- 左插槽 -->
  <view slot="right">右视图</view> <!-- 右插槽 -->
</component1>

在这个例子中，<view slot="left"> 会插入到 <slot name="left"> 插槽中，<view slot="right"> 会插入到 <slot name="right"> 插槽中，而没有指定 slot 的内容会插入到默认插槽中。

🦋1.3 组件样式隔离与外部样式管理

☀️1.3.1 样式隔离

为了避免组件的样式影响到页面的其他部分，或页面样式影响到组件，可以通过配置 styleIsolation 来进行样式隔离。

styleIsolation 选项的可选值：

• isolated：启用样式隔离，组件内部的样式与外部页面样式不会互相影响。
• apply-shared：页面的样式会影响到组件内部，但组件内的样式不会影响页面。
• shared：组件与页面共享样式，组件内部的样式与外部页面样式可以相互影响。

示例：

// component1.js
Component({
   
  options: {
   
    styleIsolation: 'isolated'  // 启用样式隔离
  }
});

☀️1.3.2 接收外部样式

为了让组件的样式更加灵活，组件可以通过 externalClasses 选项接受外部样式。使用外部类名可以让外部的样式覆盖组件的默认样式。

示例：

// component1.js
Component({
   
  externalClasses: ['title-class']  // 允许外部传入 'title-class' 样式
});

<!-- component1.wxml -->
<view>
  <view style="text-align: center;">
    <text class="title-class">{
  {title}}</text> <!-- 使用外部传入的样式 -->
  </view>
  <slot></slot>
  <view style="display: flex; flex-direction: row; justify-content: space-between;">
    <slot name="left"></slot>
    <slot name="right"></slot>
  </view>
</view>

在使用组件时，可以通过传入自定义的样式来覆盖组件的默认样式：

<!-- 使用组件时 -->
<component1 title="按钮组" title-class="title"></component1>

<!-- 在 customComponent.wxss 中 -->
.title {
  color: red;  /* 修改标题颜色为红色 */
}

🦋1.4 总结

1. WXML 和 WXSS 文件：

   • WXML 用于定义组件的结构，支持插槽（默认插槽和具名插槽）。
   • WXSS 用于定义组件的样式，推荐使用类选择器并避免使用 ID、属性选择器等。

2. 插槽的使用：

   • 默认插槽：没有 name 属性的 <slot> 标签。
   • 具名插槽：通过 name 属性区分多个插槽。

3. 样式管理：

   • 使用 styleIsolation 配置样式隔离模式。
   • 通过 externalClasses 让组件能够接收外部传入的样式。

通过这些机制，组件的设计可以更加灵活和模块化，方便开发者进行复用和定制化。

🔎2.组件间的通信

🦋2.1 组件间通信方式概述

在小程序中，组件间的通信主要分为以下几种情况：

1. 父组件（页面）向子组件传递数据
2. 子组件向父组件传递数据
3. 父组件通过子组件实例直接获取子组件的数据或调用子组件的方法

我们将重点讨论第2种和第3种应用场景。

🦋2.2 父组件向子组件传递数据

父组件向子组件传递数据通常通过 properties 外部属性进行实现。父组件在使用子组件时，通过设置子组件的 properties 属性来传递数据。这种方式是相对简单和直接的，且在上文已经有过讨论，这里不再重复。

🦋2.3 子组件向父组件传递数据

子组件向父组件传递数据一般通过 自定义事件 来实现。子组件通过 triggerEvent 方法触发自定义事件，将需要传递的数据作为参数传递给父组件。

☀️2.3.1 触发自定义事件

1. 在子组件的 WXML 文件中绑定事件：

   <!-- component1.wxml -->
   <text class="title-class" bindtap="tapTitle">{
       {title}}</text>
   

2. 在子组件的 JS 文件中定义触发事件的方法：

   // component1.js
   Component({
        
     properties: {
        
       title: {
        
         type: String,
         value: '默认标题'