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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_5016