vue中的slot初体验

最新推荐文章于 2024-10-10 19:00:00 发布

gunsmoke

最新推荐文章于 2024-10-10 19:00:00 发布

阅读量114

点赞数

分类专栏： vue学习

本文链接：https://blog.youkuaiyun.com/gunsmoke/article/details/106200854

版权

vue学习专栏收录该内容

29 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="../vue.js"></script>
    <style>

    </style>
</head>

<body>
    <div id="main" class="container">
        <child>
            <!--插槽就是子组件中预留出的位置,在父区间中去实现,父组件的实现各有不同,类似于接口-->
            <div slot="a">插槽a</div>
            <div slot="b">插槽b</div>
        </child>
    </div>

    <script>
        Vue.component('child',{
            template: `
                <div>
                    <slot name="a"></slot>
                    子组件的内容
                    <slot name="b"></slot>
                </div>
            `
        });
        new Vue({
            el: '#main',
            data: {
            },
            methods: {
            }
        })
    </script>

</body>
</html>