学习vue3第十节（插槽v-slot）

news2024/11/16 4:54:46

本节主要介绍一下 v-slot 插槽指令，以及插槽相关内容

1、定义：

子组件给父组件提供使用的一个位置，使用<slot></slot>表示，父组件可以在这个位置填充任何代码；

2、默认插槽

匿名插槽：会自定渲染一个 #default插槽，将没有声明的名称的内容，放入default中

<template>
<!-- 子组件 -->
  <div class="child">
    <h2>子组件</h2>
    <slot>默认内容</slot> // 内容会渲染到slot中
  </div>
</template>

<!-- 父组件 -->
<template>
  <div class="par">
  <h3>父组件</h3>
    <Child>匿名插槽，内容将会渲染到子组件的slot中</Child> // 此处无内容时，会渲染子组件中的默认内容；
  </div>
</template>

如图：
在这里插入图片描述

可以看到父组件下的 Child中的内容会自动渲染到子组件中的slot中；
如果父组件中的Child中没有内容，则会自动渲染子组件中 slot 中的默认内容；如果父组件中的Child中有内容，则会替代子组件 slot 中的默认内容；

3、具名插槽

具名插槽就是为要渲染的内容指定一个位置，让其待着指定的位置；父组件会根据具名插槽的(slot="header" 或者 #header)会渲染到子组件中相同名称的插槽中；
具名插槽可以有多个不同名称的插槽，而匿名插槽只能有一个，同时，在父组件中没有声明的插槽内容都会渲染到子组件的匿名插槽中；

<template>
<div class="par">
  <h3>父组件</h3>
    <!-- <Child >
     <template #:header>父组件渲染的具名插槽</template>
     </Child> -->
    <Child >
      <template v-slot:header>父组件渲染的具名插槽</template>
    </Child> // #header表示具名插槽的名字 简写方式
  </div>
</template>
<script setup>
import Child from './components/childSlot.vue'
</script>

<template>
  <!-- 子组件 -->
    <div class="child">
      <h2>具名插槽</h2>
      <slot name="header"></slot>
    </div>
  </template>

4、动态插槽

动态插槽名就是插槽名变成了变量的形式，我们可以随时修改这个变量从而展示不同的效果。它的写法是v-slot:[变量名]或者缩写为#[变量名]。

  <template>
    <div class="par">
    <h3>父组件</h3>
      <Child >
        <template v-slot:[slotName]>动态插槽</template>
      </Child> 
    </div>
  </template>
  <script setup>
    import Child from './components/childSlot.vue'
    const slotName = ref('foot') // 声明动态插槽名称为 子组件的插槽名渲染到foot插槽名中；
  </script>

5、作用域插槽

作用域插槽就是父组件进行增删改查操作，向子组件传递数据；同时子组件通过插槽获取数据，同时子组件可以修改数据，然后再通过插槽返回给父组件；

<template>
  <!-- 子组件 -->
    <div class="child">
      <h2>子组件</h2>
      <h2>作用域插槽</h2>
      <slot text="作用域插槽2222" ></slot>
      <slot text="具名插槽作用域" name="foot2"></slot>
    </div>
  </template>

 <template>
  <div class="par">
    <h3>父组件</h3>
      <Child v-slot="{text}">
        {{text}} // 作用域插槽，渲染出来的内容是：“作用域插槽2222”
      </Child> 
      <Child >
      <!-- 具名插槽 作用域 -->
      <Child >
        <template #foot2="foot2Props">
          {{foot2Props.text}} // 作用域插槽，渲染出来的内容是：“具名插槽作用域”
        </template>
      </Child> 
  </div>
 </template>