深入理解 CSS 属性 pointer-events: none

UniApp在 Vue3的 setup 语法糖下自定义组件插槽详解

UniApp 是一个基于 Vue.js 的跨平台开发框架，可以用来开发微信小程序、H5、App 等多种平台的应用。Vue 3 引入了 <script setup> 语法糖，使得组件的编写更加简洁和直观。本文将详细介绍如何在 UniApp 中使用 Vue 3 的 <script setup> 语法糖来创建自定义组件，并展示如何使用默认插槽、具名插槽和作用域插槽。

1. 默认插槽

默认插槽是最简单的插槽形式，它允许你在组件内部定义一个可替换的内容区域。父组件可以通过直接放置内容来填充这个插槽。

示例：自定义组件 MyComponent.vue

<template>
  <view class="my-component">
    <!-- 默认插槽 -->
    <slot></slot>
  </view>
</template>

<script setup>
// 这里可以定义组件的逻辑
</script>

<style scoped>
.my-component {
  border: 1px solid #ccc;
  padding: 20rpx;
  margin: 20rpx;
  background-color: #f9f9f9;
}
</style>

使用自定义组件 App.vue

<template>
  <view class="app">
    <MyComponent>
      <text>这是默认插槽的内容</text>
    </MyComponent>
  </view>
</template>

<script setup>
import MyComponent from './components/MyComponent.vue';
</script>

<style>
.app {
  padding: 20rpx;
  background-color: #fff;
}
</style>

2. 具名插槽

具名插槽允许你在组件内部定义多个插槽，并通过名称来区分它们。父组件可以通过 v-slot 指令来指定内容应该填充到哪个插槽。

示例：自定义组件 MyComponent.vue

<template>
  <view class="my-component">
    <!-- 默认插槽 -->
    <slot></slot>

    <!-- 具名插槽 -->
    <view class="header">
      <slot name="header">
        <text>默认头部内容</text>
      </slot>
    </view>

    <view class="footer">
      <slot name="footer">
        <text>默认底部内容</text>
      </slot>
    </view>
  </view>
</template>

<script setup>
// 这里可以定义组件的逻辑
</script>

<style scoped>
.my-component {
  border: 1px solid #ccc;
  padding: 20rpx;
  margin: 20rpx;
  background-color: #f9f9f9;
}

.header, .footer {
  margin: 10rpx 0;
  padding: 10rpx;
  border: 1px dashed #ccc;
}
</style>

使用自定义组件 App.vue

<template>
  <view class="app">
    <MyComponent>
      <!-- 默认插槽内容 -->
      <text>这是默认插槽的内容</text>

      <!-- 具名插槽内容 -->
      <template #header>
        <text>这是头部插槽的内容</text>
      </template>

      <template #footer>
        <text>这是底部插槽的内容</text>
      </template>
    </MyComponent>
  </view>
</template>

<script setup>
import MyComponent from './components/MyComponent.vue';
</script>

<style>
.app {
  padding: 20rpx;
  background-color: #fff;
}
</style>

3. 作用域插槽

作用域插槽允许你在组件内部传递数据给父组件，父组件可以使用这些数据来生成插槽内容。

示例：自定义组件 MyComponent.vue

<template>
  <view class="my-component">
    <!-- 默认插槽 -->
    <slot></slot>

    <!-- 具名插槽 -->
    <view class="header">
      <slot name="header">
        <text>默认头部内容</text>
      </slot>
    </view>

    <!-- 作用域插槽 -->
    <view class="content">
      <slot name="content" :item="item">
        <text>默认内容：{{ item.text }}</text>
      </slot>
    </view>

    <view class="footer">
      <slot name="footer">
        <text>默认底部内容</text>
      </slot>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const item = ref({
  text: '这是作用域插槽的默认内容'
});
</script>

<style scoped>
.my-component {
  border: 1px solid #ccc;
  padding: 20rpx;
  margin: 20rpx;
  background-color: #f9f9f9;
}

.header, .content, .footer {
  margin: 10rpx 0;
  padding: 10rpx;
  border: 1px dashed #ccc;
}
</style>

使用自定义组件 App.vue

<template>
  <view class="app">
    <MyComponent>
      <!-- 默认插槽内容 -->
      <text>这是默认插槽的内容</text>

      <!-- 具名插槽内容 -->
      <template #header>
        <text>这是头部插槽的内容</text>
      </template>

      <!-- 作用域插槽内容 -->
      <template #content="{ item }">
        <text>这是作用域插槽的内容：{{ item.text }}</text>
      </template>

      <!-- 另一个具名插槽内容 -->
      <template #footer>
        <text>这是底部插槽的内容</text>
      </template>
    </MyComponent>
  </view>
</template>

<script setup>
import MyComponent from './components/MyComponent.vue';
</script>

<style>
.app {
  padding: 20rpx;
  background-color: #fff;
}
</style>

总结

通过上述示例，我们详细介绍了如何在 UniApp 中使用 Vue 3 的 <script setup> 语法糖来创建和使用自定义组件的插槽。具体包括：

1. 默认插槽：通过 <slot></slot> 定义，默认内容可以直接放置在组件标签内。
2. 具名插槽：通过 <slot name="xxx"></slot> 定义，使用 #xxx 或 v-slot:xxx 来指定内容。
3. 作用域插槽：通过 <slot name="xxx" :item="item"></slot> 定义，父组件可以通过解构参数来访问传递的数据。

希望这些示例能帮助你更好地理解和使用 UniApp 和 Vue 3 的插槽功能。