前端进阶Vue框架-----插槽（slot）新版与旧版

小不言啊

已于 2022-02-19 17:55:08 修改

阅读量460

点赞数

文章标签： vue.js 前端 javascript

于 2022-02-19 17:35:38 首次发布

本文链接：https://blog.youkuaiyun.com/m0_61656944/article/details/123021285

版权

本文深入探讨了Vue框架中的插槽机制，包括旧版的单个插槽使用，以及新版中具名插槽的变化。新版插槽引入了<template>标签，通过全称或#号指针灵活地进行内容插入。通过实例练习，帮助读者掌握这一关键特性。

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

在组件中一般会留有 <slot>插槽，方便修改组件中的一些内容

单个插槽：旧版

具名插槽：

新版：利用<template>标签包裹，两种写法，一个时用全称指向哪个组件，另一种直接用#号指向

练习：

   <script src="/lib/vue.js"></script>
</head>
<body>
    <div id="box">
      
        <navbar >
            <button @click="isShow=!isShow">点击显示或隐藏</button>
        </navbar>
       
        <sidebar v-show="isShow"></sidebar>

    </div>

    <script>

        Vue.component("navbar",{
            template:`
            <div style="background-color:red;">
                <slot></slot>
            </div>
            `
        })



        Vue.component("sidebar",{
            template:`
            <div style="background-color:blue;">
            <ul>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            </ul>
            </div>
            `
        })


        new Vue({
                el:"#box",
                data:{
                    isShow:false
                }
            })
    </script>
   
    
</body>
</html>