淺析Vue中插槽Slot的作用與具名插槽

Vue中的插槽相信使用過Vue的小夥伴或多或少的都用過，但是你是否了解它的用法呢？這篇文章就為大家帶來Vue中插槽Slot基本使用和具名插槽，希望對大家有幫助！

一、插槽Slot

#1.1.插槽Slot的作用

⭐⭐
初識插槽:

• 為了讓這個元件具備更強的通用性，我們不能將元件中的內容限制為固定的div、 span等等這些元素；【相關推薦：vuejs影片教學】
• 例如某種情況下我們使用元件，希望元件顯示的是按鈕，某種情況下我們使用元件希望顯示的是一張圖片；
• 我們應該讓使用者可以決定某一塊區域到底要存放什麼內容和元素；
• 所以就可以使用插槽來解決這個問題

換句話說就是，我們要是想在一個元件標籤中加入新的內容，那麼我們就需要在該元件內宣告一個插槽，不然，新增的新內容不會被渲染

⭐⭐
使用插槽：

• 用slot元素作為插槽
• 插入什麼內容是由父元素如何使用，例如父元件插入按鈕、插入圖片，就會顯示按鈕圖片，如果沒有，那就不顯示或許顯示插槽預設的內容
• 有時我們希望在使用插槽時，如果沒有插入對應的內容，那麼我們需要顯示一個預設的內容：
• 當然這個預設的內容只會在沒有提供插入的內容時，才會顯示；
• 我們可以在slot標籤中設定一個預設內容

使用插槽案例：

父元件

App.vue

<template>
    <div class="app">
        <!-- 内容是button -->
        <show-message title="哈哈哈">
            <button>我是按钮元素</button>
        </show-message>
        <!-- 内容是超链接 -->
        <show-message>
            <a href="#">百度一下</a>
        </show-message>

        <!-- 没有值传递 -->
        <show-message></show-message>
    </div>
</template>

子元件
showMessage.vue

<template>
    <h2>{{title}}</h2>
    <div class="content">
        <slot>
            <p>我是默认值</p>
        </slot>
    </div>
</template>

• 效果圖：
  
  # 我們可以發現，在元件showMessage裡面，我們給它一個插槽，
• 在App.vue, 我們給showMessage三次重複使用，
• 一次為按鈕，一次為a標籤，一次什麼也不加
• 而產生的結果就是，一個為按鈕，一個為a連結，一個為插槽預設的p標籤
  

我們可以看出來

• 插槽部分想要展示什麼內容由父元素進行決定, 如果插槽沒有插入東西, 那麼這個插槽會被忽略
• 也就是說，用了插槽，父元素如果用按鈕，子元素就會顯示按鈕，父元素用標題，子元素就會顯示標題
• 如果子元件沒有插槽，那就顯示不出來了

1.2.具名插槽Slot

⭐⭐

希望達到的效果是插槽對應內容的顯示，這個時候我們就可以使用具名插槽：

• 具名插槽顧名思義就是給插槽取一個名字，slot 元素有一個特殊的attribute：name;
• 一個不帶 name 的slot，會帶有隱含的名字 default;
• 也就是說, 我們可以給每個插槽都取上一個名字,
• 在父組件中使用的時候, 需要包裹一個template標籤, 並在template#中使用
• v-solt: 插槽名具名插槽縮寫

##父元件
#App.vue

<template>
    <nav-bar>
        <template v-slot:left>
            <button>返回</button>
        </template>

        <template v-slot:center>
            <span>内容</span>
        </template>

        <template v-slot:right>
            <a href="#">登录</a>
        </template>
    </nav-bar>
</template>

子元件
NavBar.vue
(顏色啥的css裡面自己可以調，這裡就不放了）

<template>
    <div class="nav-bar">
        <div class="left">
            <slot name="left">left</slot>
        </div>
        <div class="center">
            <slot name="center">center</slot>
        </div>
        <div class="right">
            <slot name="right">right</slot>
        </div>
    </div>
</template>

效果圖：

# 達到的效果是插槽對應的顯示
所以這就是具名插槽的作用

⭐⭐
動態插槽名稱
透過v-slot: [dynamicSlotName]方式動態綁定一個名稱；

Ps:還有作用域插槽，我目前還不是很理解，先不寫了~

（學習影片分享：web前端開發、程式設計基礎影片）

#

以上是淺析Vue中插槽Slot的作用與具名插槽的詳細內容。更多資訊請關注PHP中文網其他相關文章！