Vue基础(十)插槽

最新推荐文章于 2024-05-31 15:55:23 发布

夜刀神十三香

最新推荐文章于 2024-05-31 15:55:23 发布

阅读量86

点赞数

分类专栏：学习笔记简单实例笔记记录文章标签： vue 前端 html

本文链接：https://blog.csdn.net/qq_44990139/article/details/95861981

版权

学习笔记同时被 3 个专栏收录

65 篇文章 0 订阅

订阅专栏

笔记

65 篇文章 0 订阅

订阅专栏

记录

64 篇文章 0 订阅

订阅专栏

插槽

把所有代码比作一条路,插槽就是在路上砸个坑将制定内容放进去

<body>
    <div id="app">
        <child-one>
            <a href="#">外面传入的</a>
            <a href="#">外面传入的</a>
        </child-one>
    </div>

    <script>
        Vue.component("child-one",{
            props:{

            },
            template:`<div>
                    <slot>你没有传入内容</slot>
                </div>`
        })
        let vue=new Vue({
            el:"#app",
            components:{

            },
            data:{

            },
             
        })
    </script>
</body>
</html>

具名插槽，就是给这个插槽起个名字

在组件中，我给插槽起个名字，一个名字叫"bd"，一个名字叫"xl"，还有一个不起名字。

然后再内，slot属性对应的内容都会和组件中name一一对应。

而没有名字的，就是默认插槽！！

<body>
    <div id="app">
        <child-one>
            <a href="#" slot="bd">百度</a>
            <a href="#" slot="xl">新浪</a>
            <a href="#" ">无名小站</a>
        </child-one>
    </div>

    <script>
        Vue.component("child-one",{
            props:{

            },
            template:`<div>
                    <slot name="bd">你没有给插槽传入内容</slot>
                    <hr>
                    <slot name="xl">你没有给插槽传入内容</slot>
                    <hr>
                    <slot>你没有给插槽传入内容</slot>
                </div>`
        })
        let vue=new Vue({
            el:"#app",
            components:{

            },
            data:{

            },
             
        })
    </script>
</body>
</html>