uniapp 使用自定义插槽 slot的基本步骤

<!-- slot-one.vue -->
<template>
  <view class="slot-item">
    <!-- 默认插槽位置 -->
    <slot></slot>
  </view>
</template>

<!-- 父组件.vue -->
<template>
  <view>
    <slot-one>
      <!-- 这里的内容会被替换到子组件的 slot 内 -->
      <view>这是父组件传递给子组件的默认插槽内容</view>
    </slot-one>
  </view>
</template>
<script>
import SlotOne from '@/components/slot-one.vue'
export default {
  components: {
    SlotOne,
  },
}
</script>

<!-- slot-one.vue -->
<template>
  <view class="slot-item">
    <!-- 具名插槽 example1 -->
    <slot name="header">默认头部内容</slot>
    <!-- 具名插槽 example2 -->
    <slot name="body">默认主体内容</slot>
    <!-- 其他内容... -->
  </view>
</template>

<!-- 父组件.vue -->
<template>
  <view>
    <slot-one>
      <!-- 填充具名插槽 header -->
      <template v-slot:header>
        <view>这是父组件传递给子组件的头部插槽内容</view>
      </template>
      <!-- 填充具名插槽 body -->
      <template v-slot:body>
        <view>这是父组件传递给子组件的主体插槽内容</view>
      </template>
    </slot-one>
  </view>
</template>

<!-- slot-one.vue (Vue 2.x) -->
<template>
  <view class="slot-item">
    <slot :item="scopedItem">
      <!-- 子组件提供的默认内容 -->
      {{ scopedItem.defaultText }}
    </slot>
  </view>
</template>
<script>
export default {
  data() {
    return {
      scopedItem: {
        defaultText: '这是子组件提供的默认内容',
        // 其他数据...
      },
    };
  },
};
</script>

<!-- 父组件.vue (Vue 2.x) -->
<template>
  <view>
    <slot-one>
      <template slot="item" slot-scope="{ item }">
        <view>这是从子组件获取的：{{ item.text }}</view>
      </template>
    </slot-one>
  </view>
</template>

<!-- 子组件.vue (Vue 3.x) -->
<template>
  <view class="slot-item">
    <slot let:item="scopedItem">
      {{ scopedItem.defaultText }}
    </slot>
  </view>
</template>
<script>
export default {
  setup() {
    const scopedItem = reactive({
      defaultText: '这是子组件提供的默认内容',
      // 其他数据...
    });
    return {
      scopedItem,
    };
  },
};
</script>

<!-- 父组件.vue (Vue 3.x) -->
<template>
  <view>
    <slot-one>
      <template #default="{ item }">
        <view>这是从子组件获取的：{{ item.text }}</view>
      </template>
    </slot-one>
  </view>
</template>