Vue中插槽的使用

Vue中的插槽分为匿名插槽、具名插槽、作用域插槽，总结其用法

1、默认插槽

默认插槽不需要为插槽指定名称，默认会有一个default名称，这种插槽适用于只插入一个内容的时候。在HTML标签中slot:default可以省略

写法：slot在HTML标签上时直接写：slot:default

当在template标签上时写成 v-slot:default 或者 #default（此时不可省略）

在同一个地方不能出现相同的插槽名，否则编译报错

也可以为<slot></slot>指定默认内容，此时如果父组件没有传入对应的内容则展示默认内容，否则会替换掉子组件中的默认内容

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <slot>这是插槽的默认内容</slot>
  </div>
</template>


<template>
  <!-- <router-view/> -->
  <About>
    <template #default>
      <div >这是APP页面1</div>
    </template>
    <!-- <div>这是APP页面</div> -->
  </About>
</template>
<script lang="ts">
import About from "./views/About.vue"
export default ({
  name:'App',
  components:{
    About
  }
})
</script>

2.具名插槽

在页面中有多个需要插入不同位置的内容时，此时子组件有多个多个插槽，需要为插槽指定名称。

语法：<slot name="footer"></slot>

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <slot>默认插槽</slot>
    <slot name="header">我是header</slot>
    <slot name="body">我是body</slot>
    <slot name="footer">我是footer</slot>
  </div>
</template>


<template>
  <!-- <router-view/> -->
  <About>
    <!-- <template #default>
      <div >这是APP页面1</div>
    </template> -->
    <div slot:default>这是APP页面,默认插槽内容</div>
    <template #header>
      <div>我是父组件header</div>
    </template>
    <template #body>
      <div>我是父组件body</div>
    </template>
    <!-- <template #footer>
      <div>我是父组件footer</div>
    </template> -->
  </About>
</template>
<script lang="ts">
import About from "./views/About.vue"
export default ({
  name:'App',
  components:{
    About
  }
})
</script>

3.作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。例如，设想一个带有如下模板的 <current-user> 组件：

<span>
  <slot>{{ user.lastName }}</slot>
</span>

我们可能想换掉备用内容，用名而非姓来显示。如下：

<current-user>
  {{ user.firstName }}
</current-user>

然而上述代码不会正常工作，因为只有 <current-user> 组件可以访问到 user 而我们提供的内容是在父级渲染的。

为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个 attribute 绑定上去：

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>