08.29自我總結

Vue中插槽指令

意義

• 就是在組件里留著差值方便後續組件內容新增
• 而且由於插件是寫在父級中數據可以直接父級中傳輸而不需要傳子再傳父有些情況會減少寫代碼量

示例

<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>

幾種插槽特殊情況

情況一:組件里沒有設置插件名稱,頁面中插槽中寫了插槽名稱 結果頁面中插槽不會被渲染

情況二:組件里有設置插件名稱,頁面中插槽中沒寫了插槽名稱 結果頁面中插槽不會被渲染

情況三:組件里沒有設置插件名稱,頁面中插槽中沒寫了插槽名稱 結果頁面中插槽會被渲染

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

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