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个,前提名字要一一对应