Vue中插槽指令

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個,前提名字要一一對應