小程序自定义组件Component超全实用指南

前端

2023-10-10 19:21:17

小程序自定义组件：全面指南

简介

小程序自定义组件是代码复用和提升开发效率的强大工具。开发者可以创建可复用组件，从而在其他页面中轻松嵌入业务逻辑或页面模板。自定义组件封装在 Component 类中，包含模板、样式和自定义事件。

自定义组件开发流程

定义组件类： 继承 Component 类并定义组件的模板、样式和自定义事件。
注册组件： 在 app.json 文件中注册组件，指定组件的路径。
在页面中使用组件： 在需要使用组件的页面中使用 <component/> 标签引入组件。

生命周期函数

自定义组件的生命周期与小程序页面类似，包括：

onLoad：组件首次加载时触发
onReady：组件及其子组件加载完成后触发
onShow：组件显示时触发
onHide：组件隐藏时触发
onUnload：组件卸载时触发

数据绑定

通过 properties 属性，组件可以与父组件进行数据绑定。父组件设置数据，子组件接收并展示数据。

// 父组件
<my-component name="John Doe"></my-component>

// 子组件
export default {
  properties: {
    name: {
      type: String,
      value: '',
    },
  },
};

事件通信

通过 events 属性，组件可以与父组件进行事件通信。子组件触发事件，父组件监听并处理事件。

// 父组件
<my-component @my-event="handleMyEvent"></my-component>

// 子组件
export default {
  events: {
    'my-event': () => {},
  },
};

插槽

通过 slot 标签，父组件可以在子组件中插入内容。子组件提供插槽区域，父组件填充内容。

// 父组件
<my-component>
  <template slot="header">
    <h1>这是头部</h1>
  </template>
  <template slot="content">
    <p>这是内容</p>
  </template>
</my-component>

// 子组件
export default {
  slots: {
    header: {
      type: 'view',
    },
    content: {
      type: 'view',
    },
  },
};