vue-插槽(slot)

最新推荐文章于 2025-02-14 09:00:00 发布

原创最新推荐文章于 2025-02-14 09:00:00 发布 · 359 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

Vue学习专栏收录该内容

12 篇文章

订阅专栏

本文介绍了Vue.js中插槽（Slot）的使用，通过实例展示了如何自定义组件并利用slot进行内容分发。通过在todo组件中定义插槽，并在父组件中插入todo-title和todo-items子组件，实现了内容的模块化。示例代码详细解释了组件间的绑定过程，帮助理解Vue.js的组件通信和内容插入机制。

插槽其实是为了维护的负担，就相当于，把每一块的内容给模块化。使用的是标签实现的

执行过程：首先自定义三个组件，名字分别是todo、todo-title、todo-items，然后在todo这里边，通过使用slot标签的name来绑定这个组件，然后在id为app的div里边使用 slot绑定这个标签，至此这个才算是把它们全部绑定起来了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
</head>
<body>

    <div id="app">
        <todo>
            <!--v-bind:title="title"等价于 :title="title"-->
            <todo-title slot="todo-title" v-bind:title="title"></todo-title>
            <todo-items slot="todo-items" v-for="item in items" :item="item"></todo-items>
        </todo>
    </div>

    <!--引入vue的cdn-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        Vue.component("todo",{
            template: "<div>\
                            <slot name='todo-title'></slot>\
                            <ul>\
                                <slot name='todo-items'></slot>\
                            </ul>\
                        </div>"
        });

        Vue.component("todo-title",{
            props: ["title"],
            template: "<div>{{title}}</div>"
        });

        Vue.component("todo-items",{
            props: ["item"],
            template: "<li>{{item}}</li>"
        });

        var vm = new Vue({
            el: "#app",
            data: {
                title: "四大名著",
                items: ["红楼梦","西游记","三国演义","水浒传"]
            }
        });
    </script>

</body>
</html>