vue中有哪些插槽

本篇內(nèi)容主要講解“vue中有哪些插槽”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue中有哪些插槽”吧!

vue中有3種插槽：1、默認插槽，語法“<slot></slot>”；2、具名插槽，語法“<slot name="名稱"></slot>”；3、作用域插槽，語法“<slot :自定義name=data中的屬性或?qū)ο?gt;</slot>”。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

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

默認插槽，具名插槽，作用域插槽

vue中的插槽，指的是子組件中提供給父組件使用的一個占位符；
用標簽表示，父組件可以在這個占位符中填充任何模板代碼，比如HTML、組件等，填充的內(nèi)容會替換掉子組件的標簽（替換占位符）。

默認插槽

默認插槽是最簡單的一種插槽，和上面的描述一致，就是通過替換占位符達到在父組件中更改子組件中內(nèi)容的效果。

語法：<slot></slot>

在子組件中放置一個占位符（slot）：

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

<script>
export default {
    name: 'chassList'
}
</script>

然后在父組件中引用這個子組件，并給這個占位符（slot）填充內(nèi)容：

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

這時頁面展現(xiàn)的內(nèi)容會是【今天吃啥：莎莎減肥大嫂不讓莎莎吃飯】。

具名插槽

比如在子組件中有兩個要替換占位符的地方（兩個slot），這時父組件如果要將相應的內(nèi)容填充到相應的插槽中，靠默認插槽是沒有辦法判斷相應的內(nèi)容要填充到哪個插槽中的。為了應對這樣的場景，具名插槽應運而生。

具名插槽，其實就是給子組件中的插槽取一個名字，而父組件就可以在引用子組件的時候，根據(jù)這個名字對號入座，將相應內(nèi)容填充到相應的插槽中。

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

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

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

<script>
export default {
    name: 'chassList'
}
</script>

在父組件中引用該子組件，并通過v-slot:[name]的方式將相應的內(nèi)容填充到相應的插槽中：

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

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

使用默認插槽和具名插槽的注意事項

1.如果子組件中存在多個默認插槽，那么父組件中所有指定到默認插槽的填充內(nèi)容（未指定具名插槽），會全部填充到子組件的每個默認插槽中。

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

3.如果子組件中同時存在默認插槽和具名插槽，但是在子組件中找不到父組件中指定的具名插槽，那么該內(nèi)容會被直接丟棄，而不會被填充到默認插槽中。

作用域插槽

作用域插槽相比于前面的默認插槽和具名插槽，會比較難于理解和運用。

• 前面的兩個插槽強調(diào)的是填充占位的【位置】；

• 作用域插槽強調(diào)的則是數(shù)據(jù)作用的【范圍】；

• 作用域插槽，就是帶參數(shù)（數(shù)據(jù)）的插槽；

在子組件的插槽中帶入?yún)?shù)（數(shù)據(jù)）提供給父組件使用，該參數(shù)（數(shù)據(jù)）僅在插槽內(nèi)有效，父組件可以根據(jù)子組件中傳過來的插槽參數(shù)（數(shù)據(jù)）對展示內(nèi)容進行定制。

語法：<slot :自定義name=data中的屬性或?qū)ο?gt;</slot>

在子組件中放置一個帶參數(shù)（數(shù)據(jù)）的插槽：

<template>
    <div>
        <span>插槽中的參數(shù)值是</span>
        <slot :isAllwo="isAllwo"></slot>
    </div>
</template>

<script>
export default {
    name: 'classList',
    data() {
        return {
            isAllwo: {
                one: 'one',
                two: 'two'
            }　　
        }
    }
}
</script>

在父組件中引用該子組件，并通過slot-scope來接受子組件的插槽中傳過來的參數(shù)和使用該數(shù)據(jù)。

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

這時頁面展示的內(nèi)容會是【作用域插槽：插槽中參數(shù)值是one】。

因為在template的{{}}是支持表達式的，這個時候就可以利用子組件傳過來的參數(shù)值的不同進行頁面內(nèi)容的定制。

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

這時，如果子組件中傳過來的參數(shù)是空值，頁面的展示內(nèi)容就會是【作用域插槽：插槽中參數(shù)值是空值】。

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

到此，相信大家對“vue中有哪些插槽”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！