Vue3 -插槽使用

插槽

使用场景

• 为子组件传递一些模板片段，让子组件在它们的组件中渲染传入的片段

分类

• 插槽分为默认插槽、具名插槽、动态插槽以及作用域插槽

默认插槽

• 子组件通过设置一个插槽出口

• 父组件引入子组件，在标签中间去书写要插入的模板片段即可

• 如果未传任何模板判断时会显示slot标签包裹的默认内容，且组件标签可以用单标签表示；传入模板判断时会替换掉slot包裹的默认内容

• 例子如下

• <!-- 父组件 -->
  <template>
    <div>
      <!-- 不传判断时 -->
      <Component3 />
        
      <!-- 传入模板片段 -->
      <Component3>
        <h3>我是默认插槽</h3>
      </Component3>
      
       <!-- 插槽作用域 -->
       <!-- 插槽内容可以访问到父组件的数据作用域，因为它就是在当前父作用域定义的，它无法访问子组件的数据 -->
      <Component3>
        <h3>{{ name }}</h3>
      </Component3>
    </div>
  </template>
   
  <script setup>
  import Component3 from './components/zujianup/ComponentTwo.vue'
  </script>
  
  
  <!-- 子组件 -->
  <template>
    <div>
       <div>
          <h2>头部</h2>
          <slot>
            <!-- 默认内容，传入模板会覆盖该默认内容 -->
            不传任何值时显示我
          </slot>
       </div>
    </div>
  </template>
  

具名插槽

• 有时一个组件包含多个插槽出口，为了加以区分，我们可以使用具名插槽，它可以按名字选择插入位置

• slot标签通过name去命名插槽名，而父组件传入内容时通过v-slot:或者#去跟插槽名

• <!-- 父组件 -->
  <template>
    <div>
      <Component3>
        <template v-slot:main>
          具名插槽--主体
        </template>
        <template #bottom>
          具名插槽--底部
        </template>
      </Component3>
    </div>
  </template>
   
  <script setup>
  import Component3 from './components/zujianup/ComponentTwo.vue'
  </script>
  
  <!-- 子组件 -->
  <template>
    <div>
       <div>
          <h2>头部</h2>
          <slot>
            <!--  -->
            不传任何值时显示我
          </slot>
       </div>
       <div>
          <h2>主体</h2>
          <!-- 名为main的slot -->
          <slot name="main"></slot>
       </div>
       <div>
          <h2>底部</h2>
           <!-- 名为bottom的slot -->
          <slot name="bottom"></slot>
       </div>
    </div>
  </template>
  

动态插槽

• 相比具名插槽，它的不同之处在于它的插槽名是动态的

• <template>
    <div>
      <Component3>
        <!-- extraSlot的值来源于script定义的值 -->
        <template #[extraSlot]>
          动态插槽
        </template>
      </Component3>
    </div>
  </template>
   
  <script setup>
  import { ref } from 'vue'
  import Component3 from './components/zujianup/ComponentTwo.vue'
  const extraSlot = ref('extra') // 动态插槽名
  
  </script>
  

作用域插槽

• 因为插槽内容是在父组件中定义的，无法访问子组件数据，作用域插槽则可以进行传值，是的父组件可以拿到数据使用

• <!-- 父组件 -->
  <template>
    <div>
      <Component3>
        <!-- 插槽名为finally 用slotProps接收子组件传的值 -->
        <template v-slot:finally="slotProps">
          {{ slotProps.text }} {{ slotProps.count }} {{ slotProps }}
        </template>
      </Component3>
    </div>
  </template>
  
  <!-- 子组件 -->
  <template>
    <div>
       <slot name="finally" :text="greetingMessage" :count="1" :obj="obj"></slot>
    </div>
  </template>
   
  <script setup>
      import { ref } from "vue";
  
      const obj = ref({
        name: '张三',
        age: 18
      })
  </script>