Vue slot 插槽使用详解

<template>
  <div>
    <base-layout>
      <template #header="slotProps">
        <!-- 这里可以访问传递给header插槽的数据 -->
        <h1>{{ slotProps.user.name }}</h1>
      </template>
 
      <template #default="slotProps">
        <!-- 这里可以访问传递给默认插槽的数据 -->
        <p>{{ slotProps.user.bio }}</p>
      </template>
 
      <template #footer>
        <!-- 这里不需要传递数据，因此不使用v-slot指令的参数 -->
        <p>Copyright 2023</p>
      </template>
    </base-layout>
  </div>
</template>
 
<script>
import BaseLayout from './BaseLayout.vue';
 
export default {
  components: {
    BaseLayout
  },
  data() {
    return {
      user: {
        name: '张三',
        bio: '一个普通的Vue开发者'
      }
    };
  }
};
</script>

这个例子中，我们创建了一个名为BaseLayout.vue的基础布局组件，它定义了三个插槽：header、default和footer。在父组件中，我们使用具体的模板插入到对应的插槽中，并且可以访问传递给插槽的数据。这种做法可以使得组件的使用更加灵活，可以根据需要插入不同的内容。