vue中有幾種插槽

vue中有3種插槽：1、預設插槽，語法「<slot></slot>」；2、具名插槽，語法「

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

vue的插槽（slot）主要分為三種：

預設插槽，具名插槽，作用域插槽

vue中的插槽，指的是子元件中提供給父元件使用的一個佔位符；
用標籤表示，父元件可以在這個佔位符中填充任何模板程式碼，例如HTML、元件等，填滿的內容會替換掉子元件的標籤（替換佔位符）。

預設插槽

預設插槽是最簡單的一種插槽，和上面的描述一致，就是透過取代佔位符達到在父元件中更改子元件中內容的效果。

語法：<slot></slot>

在子元件中放置一個佔位符（slot）：

<template>
    <span>
        <span>莎莎减肥</span>
        <slot></slot>
    </span>
</template>

<script>
export default {
    name: &#39;chassList&#39;
}
</script>

登入後複製

然後在父元件中引用這個子元件，並給這個佔位符（slot）填充內容：

<template>
    <div>
        <span>今天吃啥：</span>
        <chassList>
            <span>大嫂不让莎莎吃饭</span>
        </chassList>
    </div>
</template>

登入後複製

這時頁面展現的內容會是【今天吃啥：莎莎減肥大嫂不讓莎莎吃飯】。

具名插槽

例如在子元件中有兩個要替換佔位符的地方（兩個slot），這時父元件如果要將對應的內容填入對應的插槽中，靠預設插槽是沒有辦法判斷對應的內容要填入哪個插槽的。為了因應這樣的場景，具名插槽應運而生。

具名插槽，其實就是要為子元件中的插槽取一個名字，而父元件就可以在引用子元件的時候，依照這個名字對號入座，將對應內容填入對應的插槽中。

語法：<slot name="名稱"></slot>

在子元件中放置兩個具名插槽：

<template>
    <div>
        <span>第一个插槽</span>
        <slot name="one"></slot>
        <span>第二个插槽</span>
        <slot name="two"></slot>
    </div>
</template>

<script>
export default {
    name: &#39;chassList&#39;
}
</script>

登入後複製

在父元件中引用該子元件，並透過v-slot:[name]的方式將對應的內容填入對應的插槽：

<template>
    <div>
        <span>两个插槽：</span>
        <chassList>
            <template v-slot:one>
                <span>one，</span>
            </template>
            <template v-slot:two>
                <span>two</span>
            </template>
        </chassList>
    </div>
</template>

登入後複製

這時頁面展示的內容會是【兩個插槽：第一個插槽one，第二個插槽two】。

使用預設插槽和具名插槽的注意事項

1.如果子元件中存在多個預設插槽，那麼父元件中所有指定到預設插槽的填滿內容（未指定具名插槽），會全部填入子元件的每個預設插槽。

2.即使在父元件中將具名插槽的填充順序打亂，只要具名插槽的名字對應上了，填充的內容就能被正確渲染到對應的具名插槽中，一個蘿蔔一個坑。

3.如果子元件中同時存在預設插槽和具名插槽，但是在子元件中找不到父元件中指定的具名插槽，那麼該內容會被直接丟棄，而不會被填滿到預設插槽中。

作用域插槽

作用域插槽比起前面的預設插槽和具名插槽，會比較難於理解和運用。

• 前面的兩個插槽強調的是填滿佔位的【位置】；

• ##作用域插槽強調的則是資料作用的【範圍】；

• 作用域插槽，就是帶參數（資料）的插槽；

##在子元件的插槽中帶入參數（資料）提供給父元件使用，該參數（資料）僅在插槽內有效，父元件可以根據子元件中傳過來的插槽參數（資料）對展示內容進行自訂。

語法：

在子元件中放置一個帶參數（資料）的插槽：

<template>
    <div>
        <span>插槽中的参数值是</span>
        <slot :isAllwo="isAllwo"></slot>
    </div>
</template>

<script>
export default {
    name: &#39;classList&#39;,
    data() {
        return {
            isAllwo: {
                one: &#39;one&#39;,
                two: &#39;two&#39;
            }　　
        }
    }
}
</script>

登入後複製

在父元件中引用該子元件，並透過slot-scope來接受子元件的插槽中傳過來的參數和使用該資料。

<template>
    <div>
        <span>作用域插槽：</span>
        <classList>
            <template slot-scope="isAllwo">
                {{ isAllwo.isAllwo.one}}
            </template>
        </classList>
    </div>
</template>

登入後複製

此時頁面展示的內容會是【作用域插槽：插槽中參數值是one】。

因為在template的{

{}}是支援表達式的，這個時候就可以利用子元件傳過來的參數值的不同進行頁面內容的自訂。

<template>
    <div>
        <span>作用域插槽：</span>
        <classList>
            <template slot-scope="isAllwo">
                {{ isAllwo.isAllwo.one|| &#39;空值&#39; }}
            </template>
        </classList>
    </div>
</template>

登入後複製

這時，如果子元件中傳過來的參數是空值，頁面的展示內容就會是【作用域插槽：插槽中參數值是空值】。

作用域插槽的使用場景多種多樣，在各種框架中的應用也是十分廣泛，比如ElementUI中的對錶格的某一行或某一列進行展示內容的定制，就是作用域插槽的一個典型應用場景。

【相關推薦：《

vue.js教學

》】

以上是vue中有幾種插槽的詳細內容。更多資訊請關注PHP中文網其他相關文章！