在微信小程序中，你可以通过继承和扩展已有的自定义组件，以实现代码的重用和模块化。以下是一些关于自定义组件扩展的基本方法：

继承和扩展已有组件：

假设你有一个名为 base-component 的自定义组件，你可以创建一个新的组件，并在新组件中引入并扩展 base-component：
<!-- components/base-component/base-component.wxml -->
<template name="baseComponent">
  <view class="base-component">
    <text>{{text}}</text>
  </view>
</template>
// components/base-component/base-component.js
Component({
  properties: {
    text: {
      type: String,
      value: 'Default Text',
    },
  },
});

然后，你可以创建一个新的组件，继承并扩展 base-component：
<!-- components/extended-component/extended-component.wxml -->
<import src="../../components/base-component/base-component.wxml" />

<template is="baseComponent" data="{{text: 'Extended Text'}}" />
// components/extended-component/extended-component.js
// 引入并扩展 base-component
import baseComponent from '../../components/base-component/base-component';

Component({
  // 继承 baseComponent
  behaviors: [baseComponent],
  properties: {
    // 扩展新的属性
    extendedProperty: {
      type: String,
      value: 'Extended Property',
    },
  },
  methods: {
    // 扩展新的方法
    extendedMethod: function () {
      console.log('Extended Method');
    },
  },
});

在上述示例中，extended-component 继承了 base-component，并且扩展了新的属性和方法。这样，你就可以在 extended-component 中使用 base-component 的所有功能，并且添加新的功能。

使用扩展的组件：
<!-- pages/index/index.wxml -->
<import src="../../components/extended-component/extended-component.wxml" />

<extended-component extendedProperty="Custom Extended Property" />

在页面中使用 extended-component，你可以同时享有 base-component 和 extended-component 的功能。

这种方法提供了一种有效的方式来实现组件的重用和扩展。你可以创建基础组件，然后在业务中根据需要继承和扩展这些基础组件，从而实现模块化和可维护性的代码结构。


转载请注明出处：http://www.zyzy.cn/article/detail/634/微信小程序