什麼是插槽（slot）？聊聊Vue3中插槽的使用方法

Vue中的插槽相信使用過Vue的小夥伴或多或少的都用過，但是你是否了解它全部用法呢？這篇文章就為大家帶來Vue3中插槽的全部用法來幫助大家查漏補缺。 （學習影片分享：vue影片教學）

什麼是插槽

簡單來說就是子元件中的提供給父元件使用的一個坑位，用<slot></slot> 表示，父元件可以在這個坑位中填充任何範本程式碼然後子元件中<slot></slot>就會被替換成這些內容。例如一個最簡單插槽範例

//父组件
<template>
  <div>
    <child>Hello Juejin</child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//子组件Child
<template>
    <div>
        <p>1</p>
        <slot></slot>
        <p>2</p>
    </div>
</template>

子元件中的<slot></slot> 便是父元件放在子元件標籤<child></child>之間的內容。當然這之間你可以傳入任何程式碼片段，都會被放到<slot></slot>這個位置。

同樣的你也可以在標籤<child></child>之間放入變量，例如

//父组件
<template>
  <div>
    <child>{{ msg }}</child>
  </div>
</template>
<script>
import { ref } from &#39;vue&#39;
import Child from &#39;./Child.vue&#39;
const msg = ref(&#39;Hello Juejin&#39;)
</script>

先解釋後面頻繁出現的兩個字插槽和插槽內容，防止後面閱讀搞混了：

##同樣的

插槽表示的就是這個msg變數。所以子元件插槽是可以存取到父元件的資料作用域，而插槽內容是無法存取子元件的資料（即父元件中兩個< ;Child>之間是不能使用子元件中的資料的），這就是所謂的渲染作用域。後面會介紹插槽向插槽內容傳參的方式

#預設內容

在父元件沒有提供任何

插槽內容的時候，我們是可以為子元件的插槽指定預設內容的，例如

//子组件
<template>
    <div>
        <slot>我是默认内容</slot>
    </div>
</template>

//父组件1
<template>
  <div>
    <child></child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//父组件2
<template>
  <div>
    <child>Hello Juejin</child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

此時

父元件1展示預設內容

父元件2展示提供的內容

具名插槽

很多時候一個

插槽滿足不了我們的需求，我們需要多個插槽。於是就有了具名插槽，就是有名字的 插槽。簡單來說這個具名插槽的目的就是讓一個蘿蔔一個坑，讓它們留在該呆的位置去。例如有 name 的插槽 稱為具名插槽。沒有提供 name 的  會隱含地命名為「default」。在父元件中可以使用v-slot:xxx（可簡寫為#xxx） 指令的 

所以父元件中不需要在意順序，只需要寫好模板命好名，它就會自動去到它所對應的位置。

動態插槽名稱

動態插槽名稱就是插槽名稱變成了變數的形式，我們可以隨時修改這個變數從而展示不同的效果。它的寫法是

v-slot:[變數名]或縮寫為#[變數名]。

//父组件
<template>
  <div>
    <child>
      <!-- 等同于#smallTurnip -->
      <template>
        小萝卜
      </template>
      <template>
        中萝卜
      </template>
      <template>
        大萝卜
      </template>
    </child>
  </div>
</template>
<script>
import { ref } from &#39;vue&#39;
import Child from &#39;./Child.vue&#39;
const slotName = ref(&#39;smallTurnip&#39;)
</script>

作用域插槽

作用域插槽##上面說過

插槽內容

是無法存取子元件的資料的，但是如果我們想在插槽內容存取子元件的狀態該怎麼辦呢？ 其實

插槽

可以像對元件傳遞props 那樣，在slot標籤綁定屬性從而傳遞給父元件中的插槽內容。首先來看下預設插槽的傳值方式<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">//子组件 &lt;template&gt;     &lt;div&gt;         &lt;slot&gt;&lt;/slot&gt;     &lt;/div&gt; &lt;/template&gt; //父组件 &lt;template&gt;   &lt;div&gt;     &lt;child&gt;       My name is {{ slotProps.personName }} and I am {{ slotProps.age }} years old this year     &lt;/child&gt;   &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import Child from &amp;#39;./Child.vue&amp;#39; &lt;/script&gt;</pre><div class="contentsignin">登入後複製</div></div>你也可以以結構的形式取得

slot

提供的資料<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;template&gt;   &lt;div&gt;     &lt;child&gt;       My name is {{ personName }} and I am {{ age }} years old this year     &lt;/child&gt;   &lt;/div&gt; &lt;/template&gt;</pre><div class="contentsignin">登入後複製</div></div>

注意不能绑定name属性，因为你绑定了name它就成了具名插槽了。同样具名插槽中的name属性也不会传递给插槽内容。因为传递的参数只能在插槽内容中使用，所以这类能够接受参数的插槽就被称为了作用域插槽。

具名作用域插槽

下面再看下具名作用域插槽它的传参方式。它接收参数的方式是通过template标签的指令v-slot的值获取的，所以可以缩写成这样

//父组件
<template>
  <div>
    <child>
      <template>
        {{ bigTurnipProps.message }}
      </template>
    </child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//子组件Child.vue

<template>
    <div>
        <!-- 大萝卜 -->
        <div>
            <slot></slot>
        </div>
    </div>
</template>

这类插槽便是具名作用域插槽啦

写在最后

到这里插槽(slot)的全部用法基本就已经介绍完啦。如果感觉对你有用的话赶紧点赞收藏吧！

（学习视频分享：web前端开发、编程基础视频）

以上是什麼是插槽（slot）？聊聊Vue3中插槽的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！