vue中slot插槽的使用（默认插槽，具名插槽，作用域插槽）

在 Vue.js 中，<slot> 元素用于分发内容（也称为插槽或内容分发），它允许你在封装组件时留出一个位置，使得使用该组件的地方可以插入自定义的内容。这非常适用于像对话框、卡片等需要灵活内容的组件。

#默认插槽和具名插槽

假设封装一个aa-dialog的对话框组件。

下面是一个简单的例子，展示如何在封装的 aa-dialog 组件中使用 <slot>：

aa-dialog.vue (封装的对话框组件)

<template>
  <div class="dialog-container">
    <div class="dialog-content">
      <!-- 默认插槽 -->
      <slot></slot>
    </div>
    <div class="dialog-footer">
      <!-- 可选：命名插槽，例如放置按钮 -->
      <!-- 如果使用 <aa-dialog> 组件的地方没有提供 v-slot:footer 或者 <template #footer> 内容的话，那么该位置将显示这个默认的"关闭"按钮。反之该区域会被覆盖。 -->
      <slot name="footer">
        <button @click="close">关闭</button>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AaDialog',
  methods: {
    close() {
      // 关闭对话框逻辑
    }
  }
}
</script>

<style scoped>
/* 对话框样式 */
</style>

使用 aa-dialog 的地方

<template>
  <div>
    <aa-dialog>
      <!-- 这里的内容会填充到 aa-dialog 的默认插槽 -->
      <p>这里是对话框内的内容。</p>
      <p>你可以在这里添加任意多的内容。</p>
      
      <!-- 命名插槽用法 -->
      <template v-slot:footer>
        <button @click="confirmAction">确认</button>
        <button @click="cancelAction">取消</button>
      </template>
    </aa-dialog>
  </div>
</template>

<script>
import AaDialog from './components/aa-dialog.vue';

export default {
  components: {
    AaDialog
  },
  methods: {
    confirmAction() {
      // 确认操作逻辑
    },
    cancelAction() {
      // 取消操作逻辑
    }
  }
}
</script>

在这个例子中：

• 默认插槽 (<slot></slot>) 让你可以在 <aa-dialog> 标签之间插入任何内容，这些内容将被渲染到对话框主体部分。
• 命名插槽 (<slot name="footer">) 允许你指定特定位置的内容，如对话框底部的操作按钮。

通过这种方式，可以创建高度可复用和灵活的组件，满足不同的需求。如果想要更多的控制，比如根据条件显示不同的内容，还可以结合作用域插槽（Scoped Slots）来实现。

#作用域插槽

作用域插槽（Scoped Slots）允许父组件在使用子组件时，不仅能够自定义子组件内部的结构和内容，还能访问子组件的数据。这对于创建高度可复用且灵活的组件非常有用。

下面是一个简单的例子，展示如何使用作用域插槽来传递数据给父组件：

子组件：aa-dialog.vue

<template>
  <div class="dialog-container">
    <div class="dialog-content">
      <!-- 作用域插槽 -->
      <slot name="content" :message="message"></slot>
    </div>
    <div class="dialog-footer">
      <slot name="footer">
        <button @click="close">关闭</button>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AaDialog',
  data() {
    return {
      message: '这是来自子组件的消息'
    }
  },
  methods: {
    close() {
      // 关闭对话框逻辑
    }
  }
}
</script>

<style scoped>
/* 对话框样式 */
</style>

父组件

<template>
  <div>
    <aa-dialog>
      <!-- 使用作用域插槽，并接收来自子组件的数据 -->
      <template v-slot:content="{ message }">
        <p>{{ message }}</p>
        <p>这里是额外的内容。</p>
      </template>

      <!-- 命名插槽用法，没有使用作用域 -->
      <template v-slot:footer>
        <button @click="confirmAction">确认</button>
        <button @click="cancelAction">取消</button>
      </template>
    </aa-dialog>
  </div>
</template>

<script>
import AaDialog from './components/aa-dialog.vue';

export default {
  components: {
    AaDialog
  },
  methods: {
    confirmAction() {
      // 确认操作逻辑
    },
    cancelAction() {
      // 取消操作逻辑
    }
  }
}
</script>

在这个例子中：

• 在 aa-dialog.vue 中，我们为 content 插槽指定了一个属性 message，它来自于子组件的数据。
• 在父组件中，当我们使用 v-slot:content 或 <template #content> 时，我们通过解构的方式获取了子组件传递过来的 message 属性，并将其显示出来。
• 如果不使用作用域插槽，父组件将无法直接访问子组件的局部状态或数据。

这种方式让父组件可以根据子组件提供的数据动态地改变内容，同时保持了组件之间的松耦合。作用域插槽是 Vue.js 提供的一种强大的工具，用于增强组件的灵活性和复用性。