vue学习（十四）slot学习

最新推荐文章于 2023-05-29 20:57:10 发布

原创最新推荐文章于 2023-05-29 20:57:10 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

vue学习专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在Vue中创建自定义组件并使用插槽功能。通过示例代码展示了如何定义带有默认插槽和具名插槽的组件，以及在父组件中如何使用这些插槽来插入内容。

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

1，在自定义组件中，参入响应的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">

        <t-body>
            <div slot="header">header</div>
            <div slot="footer">footer</div>
        </t-body>

        <t-body-a>
            <div slot="footer">footer</div>
        </t-body-a>
    </div>

    <script>

        Vue.component('t-body',{
            template:'<div>' +
            '<slot name="header"></slot>' +
            '<div>content</div>' +
            '<slot name="footer"></slot>' +
            '</div>'
        })

        Vue.component('t-body-a',{
            template:'<div>' +
            '<slot name="header"><div>default header</div></slot>' +
            '<div>content</div>' +
            '<slot name="footer"></slot>' +
            '</div>'
        })

        var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue'
            }
        })
    </script>
</body>
</html>