意義

就是在元件裡留著差值方便後續元件內容新增

而且由於外掛是寫在父級中資料可以直接父級中傳輸而不需要傳子再傳父有些情況會減少寫程式碼量

示例

<div id="app">
    <msg-tag>   //4.建立個元件
        <template v-slot:插槽的名稱>   //根據插槽的名稱建立插槽
            //插槽裡面的內容
        </template>
    </msg-tag>
</div>
<script src="vue.js"></script>
<script>
    //1.建立元件
    let msgTag = {
        template: `
        <li>
            <slot name="插槽的名稱"></slot> //3.設定插槽的內容
            <span>1111111</span>
        </li>
        `,
    };
    new vue({
        el: '#app',
        components: {
            msgTag //2.註冊元件
        }
    })
</script>
 

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

幾種插槽特殊情況

情況一:元件裡沒有設定外掛名稱,頁面中插槽中寫了插槽名稱結果頁面中插槽不會被渲染

情況二:元件裡有設定外掛名稱,頁面中插槽中沒寫了插槽名稱結果頁面中插槽不會被渲染

情況三:元件裡沒有設定外掛名稱,頁面中插槽中沒寫了插槽名稱結果頁面中插槽會被渲染

情況四:元件裡只寫了一個插槽,頁面中寫了多個插槽中沒寫了插槽名稱結果頁面中插槽會被渲染而且依次排列顯示插槽的位置

情況五:元件裡只寫了N個插槽,頁面中寫了n個插槽中沒寫了插槽名稱結果頁面中插槽會被渲染而且依次排列顯示插槽的位置,且每個插槽位置都顯示n個,前提名字要一一對應