slot_vue3选项api

slot 插槽

我们可以将某个组件通过slot的形式，插入到另一个组件中

<one-component>
    <two-component>
</one-component>

在one-component组件中

<div>
    <span>123</span>
    <slot />
</div>

这样，two-component组件就可以插入到slot中，也就是说，相当于将slot替换为<two-component>

slot的作用域

使用数据时，数据在哪个组件被声明，就调用哪个组件的数据

<one-component>
    <div>{{num}}</div>
</one-component>

在上面的例子中调用本文件中的num，而不是one-component中的num

slot的后备内容

可以使用<slot></slot>来设置插槽的默认内容

<LessonList></LessonList>
<LessonList>123</LessonList>

LessonList文件：

<div>
    <slot>ok</slot>
</div>

页面显示ok和123

具名插槽

当一个组件中有多个插槽时，需要使用具名插槽，<slot name=""/>。

实际上不设name的插槽name为default<slot name="default"/>。

当你使用这个插槽的时候，需要使用template标签，<template v-slot:name></template>。

子组件

<template>
  <div>
    <header class="text-lg">
      <slot name="header" />
    </header>
    <main class="text-sm">
      <slot name="main" />
    </main>
    <footer class="text-xs">
      <slot name="footer" />
    </footer>
  </div>
</template>

父组件

<template>
  <div class="m-4">
    <LessonList>
      <template v-slot:header>插槽内容与插口</template>
      <template v-slot:main
        >在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。</template
      >
      <template v-slot:footer
        >举个例子，这里有一个 FancyButton 组件，可以像这样使用：</template
      >
    </LessonList>
  </div>
</template>

当然 v-slot:name也有简写形式#name

<template>
  <div class="m-4">
    <LessonList>
      <template #header>插槽内容与插口</template>
      <template #main
        >在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。</template
      >
      <template #footer
        >举个例子，这里有一个 FancyButton 组件，可以像这样使用：</template
      >
    </LessonList>
  </div>
</template>

slot与prop的实例操作

可以通过slot的slotProps来进行传值，子组件插槽的属性就是slotProps对象中的属性。

父组件

<script>
import LessonList from "./components/LessonList.vue";
import lesson from "./data/lesson";
export default {
  components: { LessonList },
  data() {
    return {
      lesson,
    };
  },
  methods: {
    del(title) {
      const index = this.lesson.findIndex((v) => v.title === title);
      this.lesson.splice(index, 1);
    },
  },
};
</script>

<template>
  <div class="m-4">
    <LessonList
      v-for="lesson in lesson"
      :title="lesson.title"
      #default="slotProps"
    >
      {{ lesson.url }}
      <button @click="del(slotProps.title)">删除</button>
    </LessonList>
  </div>
</template>

子组件

<template>
  <div>
    <div class="border-2 border-gray-900 m-4">
      <slot :title="title" />
    </div>
  </div>
</template>

<script>
export default {
  props: ["title"],
};
</script>

当然，如果使用具名插槽只能使用template标签的形式