vue-插槽(slot)

最新推荐文章于 2023-11-15 11:01:56 发布

小白程序猿一枚

最新推荐文章于 2023-11-15 11:01:56 发布

阅读量298

点赞数

分类专栏： Vue学习文章标签：前端 vue.js

本文链接：https://blog.csdn.net/fgets__/article/details/121539048

版权

Vue学习专栏收录该内容

12 篇文章 1 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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

执行过程：首先自定义三个组件，名字分别是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>