什麼是插槽（slot）？聊聊Vue3中插槽的使用方法-Vue.js-PHP中文網

什麼是插槽（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>這個位置。

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

同樣的你也可以在標籤<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>

登入後複製

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

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

##同樣的

插槽表示的就是這個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展示預設內容

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

父元件2展示提供的內容

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

具名插槽

很多時候一個

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

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

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

動態插槽名稱

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

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">//子组件 <template> <div> <slot></slot> </div> </template> //父组件 <template> <div> <child> My name is {{ slotProps.personName }} and I am {{ slotProps.age }} years old this year </child> </div> </template> <script> import Child from &#39;./Child.vue&#39; </script></pre><div class="contentsignin">登入後複製</div></div>你也可以以結構的形式取得

slot

提供的資料<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><template> <div> <child> My name is {{ personName }} and I am {{ age }} years old this year </child> </div> </template></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）？聊聊Vue3中插槽的使用方法