Vue 具名插槽

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_30919919

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jwen1994/p/10969224.html

本文通过一个具体的示例介绍了如何在Vue框架中使用具名插槽。具名插槽允许父组件向子组件的特定位置插入内容，提高了组件的复用性和灵活性。示例展示了具名插槽的基本语法和实现方式。

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

具名插槽

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript">
            Vue.component('mySlot', {
                template: `
                    <li>
                        预留的第一个坑
                        <slot name = 'two'></slot>
                        预留的第二个坑
                        <slot name = 'one'></slot>
                    </li>
                `
            });

            var App = {
                template: `
                    <div>
                        <ul>
                            <mySlot>
                                <h2 slot = 'one'>我是第一个坑</h2>
                                <h3 slot = 'two'>我是第二个坑</h3>
                            </mySlot>
                        </ul>
                    </div>
                `
            }

            new Vue({
                el: '#app',
                components: {
                    App
                },
                template: '<App />'
            });
        </script>
    </body>
</html>