小程序自定义组件配合插槽和组件传值

创建组件目录

首先，在项目的 components 目录下创建一个新的文件夹来存放你的组件

/components/
  └── my-component/
        ├── my-component.wxml
        ├── my-component.wxss
        ├── my-component.js
        └── my-component.json

自定义组件 

1.my-component.wxml

<view class="my-component" bindtap="handleTap">
  <!-- 显示传入的 title 属性值 -->
  <text>{{title}}</text>

  <!-- 显示点击次数 -->
  <text>点击次数: {{count}}</text>

  <!-- 默认插槽 -->
  <slot>
    <text>默认插槽内容：这里可以放置自定义内容</text>
  </slot>

  <!-- 具名插槽，放置在底部的内容 -->
  <view class="footer">
    <slot name="footer">
      <text>默认底部内容</text>
    </slot>
  </view>
</view>

2. my-component.js 

Component({
  // 定义组件的属性
  properties: {
    title: {
      type: String,
      value: '默认标题' // 默认值
    }
  },
  data: {
    // 组件内部的数据
    count: 0 // 用于展示点击次数
  },
  methods: {
    // 自定义方法
    // 处理点击事件
    handleTap() {
      // 每次点击增加 count
      this.setData({
        count: this.data.count + 1
      });

      // 触发自定义事件，传递数据给父组件
      this.triggerEvent('tapEvent', { count: this.data.count, message: '组件被点击了' });
    }
  }
});

3. my-component.json (配置)

{
  "component": true, # 声明这是一个自定义组件
  "options": {
    "multipleSlots": true # 允许使用多个插槽
  }
}

使用插槽的页面示例

1. index.json (配置)

{
  "usingComponents": {
    "my-component": "/components/my-component/my-component" # 声明组件路径
  }
}

2.index.wxml

<view>
  <!-- 使用自定义组件，并传递 props -->
  <my-component title="插槽和通信示例" bind:tapEvent="onComponentTap">
    <!-- 自定义默认插槽内容 -->
    <view slot>
      <text>自定义的插槽内容：这个内容将替换默认插槽的内容</text>
    </view>

    <!-- 自定义具名插槽内容 -->
    <view slot="footer">
      <text>自定义的底部内容：这个内容将替换默认的底部内容</text>
    </view>
  </my-component>

  <!-- 显示从组件获取的点击信息 -->
  <view>
    <text>从组件获取的点击信息：{{ tapInfo }}</text>
  </view>
</view>

3.index.js

Page({
  data: {
    tapInfo: '' // 存储从组件获取的信息
  },

  // 处理来自子组件的事件
  onComponentTap(event) {
    // 获取子组件传递的 count 和 message 数据
    const { count, message } = event.detail;
    
    // 将信息更新到页面的 tapInfo 数据中
    this.setData({
      tapInfo: `${message}，点击次数：${count}`
    });
  }
});