VUE学习：vue基础16————插槽

最新推荐文章于 2025-07-19 12:49:59 发布

原创最新推荐文章于 2025-07-19 12:49:59 发布 · 310 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue.js 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了Vue.js中的插槽概念，包括其基本使用和高级应用。通过示例展示了如何利用插槽在组件中插入自定义内容，以及如何通过设置name属性来区分多个插槽，实现内容的定制布局。同时，还提到了v-slot的缩写形式#的使用。

提示：
VUE学习：vue基础16————插槽

VUE学习：vue基础16————插槽

前言
插槽
- 插槽标签slot的简单使用
- 插槽的高级使用

前言

本文继续学习Vue相关内容。

提示：以下是本篇文章正文内容，下面案例可供参考# 表单元素的事件绑定问题

插槽

<body>

<div id="app">
    <test>你好，世界</test>
   
</div>

</body>
<script>
    // 全局组件
    Vue.component('test', Vue.extend({
        template: '<h2>全局组件</h2>'
    }));

    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components: {
          
        }
    });
</script>

如上代码所示：

**你好，世界**中的“你好，世界”不会显示。

解决此问题我们采用了插槽。

插槽标签slot的简单使用

插槽内可以包含任意内容或html标签

<body>
<div id="app">
    <my-link>百度</my-link>
    <my-link>知乎</my-link>
    <!--            插槽内可以包含任意内容或html标签-->
    <my-link><b><i>小米</i></b></my-link>
    <!--            slot标签内给定的内容为插槽的默认值-->
    <my-link></my-link>

</div>

<template id="t1">
    <div>
        <a href="https://www.baidu.com">
<!--            插槽内可以包含任意内容或html标签-->
<!--            slot标签内给定的内容为插槽的默认值-->
            <slot>未知网站</slot>
            你好，世界
        </a>
    </div>
</template>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components:{
            'my-link':{
                template:"#t1",
            }
        }
    });
</script>

演示效果

在这里插入图片描述

插槽的高级使用

当模板中存在多个插槽时，可以给插槽设置name属性，加以区分

插槽name的默认值为default，并且在调用组件是，会自动优先向没有name的插槽中填充内容，如果存在多个没有设置name的插槽，或者name相同的插槽，则按照顺序从上至下填充最上面的插槽

<body>
<div id="app">
    <layout>
        <h3>我来组成头部</h3>
        <h3>我来组成身体</h3>
        <h3>我来组成尾部</h3>
    </layout>

</div>
<template id="t2">
    <div>
        <header>
            <slot></slot>
        </header>
        <div>
            <slot> </slot>
        </div>
        <footer>
            <slot></slot>
        </footer>
    </div>
</template>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components:{
            layout:{
                template: "#t2",
            }
        }
    });
</script>

指定插槽位置需要template标签来完成，并设置name

<body>
<div id="app">
    <layout>
        <template v-slot:foot>
            <h3>我来组成尾部</h3>
        </template>
        <template v-slot:head>
            <h3>我来组成头部</h3>
        </template>
        <h3>我来组成身体</h3>
    </layout>

</div>
<template id="t2">
    <div>
        <header>
            <slot name="head"></slot>
        </header>
        <div>
            <slot> </slot>
        </div>
        <footer>
            <slot name="foot"></slot>
        </footer>
    </div>
</template>

</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components:{
            layout:{
                template: "#t2",
            }
        }
    });
</script>

v-slot:的缩写为#

<body>
<div id="app">
    <layout>
        <template v-slot:foot>
            <h3>我来组成尾部</h3>
        </template>
        <!--缩写为#-->
        <template #head>
            <h3>我来组成头部</h3>
        </template>
        <h3>我来组成身体</h3>

        <h3>我来组成头部</h3>
        <h3>我来组成身体</h3>
        <h3>我来组成尾部</h3>
    </layout>

</div>
<template id="t2">
    <div>
        <header>
            <slot name="head"></slot>
        </header>
        <div>
            <slot> </slot>
        </div>
        <footer>
            <slot name="foot"></slot>
        </footer>

    </div>
</template>

</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components:{
            layout:{
                template: "#t2",
            }
        }
    });
</script>