Vue slot插槽的使用_v-slot:label-优快云博客

本文链接：https://blog.youkuaiyun.com/Shouhe1024/article/details/107093395

本文详细介绍了Vue.js中的slot插槽用法，包括默认插槽、具名插槽、作用域插槽等，结合实例解析其工作原理，帮助开发者更好地实现组件间的动态内容传递和布局定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
</head>
<body>

<div id="app">
    <shouhe>
        <up slot="slot1" :up_value="data_title"></up>
        <down slot="slot2" :down_value="book" v-for="book in books"></down>
    </shouhe>
</div>

<script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
<script>
    // 此处如果取名为content ，则 h1标签和 ul 标签就都会失效
    // 因此content标签也是 html 标签中的一个
    // 所以 html 本身拥有的标签不能使用
    Vue.component('shouhe', {
        template: "<div>" +
        "<h1>" +
        "   <slot name='slot1'></slot>" +
        "</h1>" +
        "<ul><slot name='slot2'></slot></ul>" +
        "</div>"
    });//只能使用一个根标签，<div><span></span></div>
    //不能使用两个根标签 <div></div><span></span>


    //属性名不要使用大写字母，因为浏览器会转成小写，导致一些问题
    Vue.component('up', {
        props: ['up_value'],
        template: "<span>{{up_value}}</span>"
    })

    Vue.component('down', {
        props: ['down_value'],
        template: "<li>{{down_value}}</li>"
    })

    var vm = new Vue({
        el: "#app",
        data: {
            data_title: "守鹤爱看的书",
            books: ['Java', 'Redis', 'Nginx'],
        }
    })
</script>

</body>
</html>