腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

vue中的v-slot指令使用

更新時(shí)間：2023年08月05日 10:34:17 作者：shadow fish

在Vue中, v-slot 指令用于定義插槽的模板內(nèi)容,v-slot 指令可以用于標(biāo)簽或組件標(biāo)簽上,以便在子組件中使用插槽,這篇文章主要介紹了vue v-slot指令,需要的朋友可以參考下

定義

在Vue中， v-slot 指令用于定義插槽的模板內(nèi)容。它用于在父組件中傳遞內(nèi)容到子組件中的插槽。 v-slot 指令可以用于標(biāo)簽或組件標(biāo)簽上，以便在子組件中使用插槽。

語法

使用 v-slot 指令時(shí)，可以使用以下兩種語法：

1.縮寫語法： # 符號(hào)表示 v-slot 指令，后面跟插槽名稱。

<template #插槽名稱>
  <!-- 插槽內(nèi)容 -->
</template>

2.完整語法： v-slot 指令后面跟著 : ，后面是插槽名稱。

<template v-slot:插槽名稱>
  <!-- 插槽內(nèi)容 -->
</template>

使用場景

v-slot 指令的使用場景包括但不限于以下幾種：

在組件中使用插槽，將父組件中的內(nèi)容傳遞給子組件。
在子組件中使用具名插槽，根據(jù)插槽名稱渲染不同的內(nèi)容。
在子組件中使用作用域插槽，將子組件中的數(shù)據(jù)傳遞到父組件中進(jìn)行渲染。

場景一

在組件中使用插槽，將父組件中的內(nèi)容傳遞給子組件。

父組件

<template>
  <div>
    <child-component>
      <template v-slot:default>
        <!-- 插槽內(nèi)容 -->
        <p>This is the content passed from the parent component.</p>
      </template>
    </child-component>
  </div>
</template>

子組件

<template>
  <div>
    <slot></slot>
  </div>
</template>

場景二

在子組件中使用具名插槽，根據(jù)插槽名稱渲染不同的內(nèi)容：

父組件

<template>
  <div>
    <child-component>
      <template v-slot:header>
        <!-- 插槽內(nèi)容 -->
        <h1>Header Content</h1>
      </template>
      <template v-slot:body>
        <!-- 插槽內(nèi)容 -->
        <p>Body Content</p>
      </template>
    </child-component>
  </div>
</template>

子組件

<template>
  <div>
    <slot name="header"></slot>
    <slot name="body"></slot>
  </div>
</template>

場景三

在子組件中使用作用域插槽，將子組件中的數(shù)據(jù)傳遞到父組件中進(jìn)行渲染：

父組件

<template>
  <div>
    <child-component>
      <template v-slot:default="slotProps">
        <!-- 插槽內(nèi)容 -->
        <p>{{ slotProps.message }}</p>
      </template>
    </child-component>
  </div>
</template>

子組件

<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "Hello from child component!"
    };
  }
};
</script>

在router-view中的應(yīng)用，拿到router-view中的Component值，同時(shí)利用component 標(biāo)簽動(dòng)態(tài)渲染組件

 <router-view v-slot="{ Component, route }">
      <transition appear name="fade-transform" mode="out-in">
        <keep-alive :include="keepAliveName">
          <component :is="Component" v-if="isRouterShow" :key="route.fullPath" />
        </keep-alive>
      </transition>
    </router-view>

tips

如果父組件沒有向插槽傳入值，則子組件會(huì)顯示原來的內(nèi)容，當(dāng)傳入具體的值時(shí)，則會(huì)覆蓋掉插槽內(nèi)的內(nèi)容

子組件：

<template>
  <slot name="a1" :content="slot_data"> <h1>child-123</h1> </slot>
</template>
<script lang="ts" setup>
const slot_data = "child-content";
</script>
<style scoped></style>

父組件：

<template>
  <div>
    <h5>slot-test</h5>
    <child>
      <!-- <template #a1="{ content }">
        <div>{{ content }}</div>
      </template> -->
    </child>
  </div>
</template>
<script lang="ts" setup>
import child from "./child.vue";
</script>
<style scoped></style>

此時(shí)注釋掉插值代碼，結(jié)果如圖，只會(huì)顯示原來槽內(nèi)內(nèi)容

在這里插入圖片描述

父組件代碼修改如下

<template>
  <div>
    <h5>slot-test</h5>
    <child>
      <template #a1="{ content }">
        <div>{{ content }} 我是父組件</div>
      </template>
    </child>
  </div>
</template>
<script lang="ts" setup>
import child from "./child.vue";
</script>
<style scoped></style>

顯示內(nèi)容如圖所示，則會(huì)覆蓋掉原來槽值

在這里插入圖片描述

在v-slot中，既可以由子組件向父組件傳值（slot_data），又可以由父組件向子組件傳遞html內(nèi)容，可以看做是‘’雙向的‘’在一些場景比如子組件渲染的內(nèi)容既需要子組件數(shù)據(jù)又需要父組件數(shù)據(jù)時(shí)可以考慮使用插槽來完成

props同樣也可以向子組件傳值，在子組件中同一渲染完成，這是之前一直使用的方式，之后可以考慮使用插槽，拿到子組件中的值，又可以向子組件傳遞內(nèi)容

只有一個(gè)默認(rèn)插槽時(shí)

可以直接這樣寫，類似于上述router-view的用法子組件：

<template>
  <slot :content="slot_data" :content2="slot_data2"> </slot>
</template>
<script lang="ts" setup>
const slot_data = "child-content";
const slot_data2 = "child-content2";
</script>

父組件：content，content2采用解構(gòu)賦值直接從slotProps值（默認(rèn)傳遞變量的名稱）中得到，templete也可以省略，child標(biāo)簽內(nèi)的所有值都會(huì)被傳入插槽

<template>
  <div>
    <h5>slot-test</h5>
    <child v-slot="{ content, content2 }">
      <!-- <h1>{{ content }}</h1> -->
      {{ content }}
      {{ content2 }}
      784561
    </child>
  </div>
</template>
<script lang="ts" setup>
import child from "./child.vue";
</script>

結(jié)果如圖：

在這里插入圖片描述