Vue的slot插槽怎么使用

ThatMonth

已于 2022-05-30 20:12:40 修改

阅读量217

点赞数

分类专栏： JavaScript 前端 Vue 文章标签： vue.js 前端 javascript

于 2022-05-28 12:19:00 首次发布

本文链接：https://blog.csdn.net/weixin_44853310/article/details/125016827

版权

JavaScript 同时被 3 个专栏收录

47 篇文章 0 订阅

订阅专栏

前端

31 篇文章 2 订阅

订阅专栏

Vue

10 篇文章 0 订阅

订阅专栏

本文介绍了一个使用Vue.js实现的动态Todo列表案例。通过组件化的方式组织代码，并利用插槽(slot)进行内容分发，实现了父组件与子组件之间的数据传递与交互。文章详细展示了如何使用v-bind绑定数据属性及v-on触发事件。

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

demo.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="mytodo-title" v-bind:title="booktitle"></todo-title>
        <todo-items slot="mytodo-items" v-for="(todoitem,index) in todoitems"
                    v-bind:item="todoitem" v-bind:bookindex="index" v-on:remove="removeItems(index)" ></todo-items>
    </todo>
</div>

<script src="https://cdn.staticfile.org/vue/2.5.21/vue.min.js"></script>
<script>

    //slot插槽
    Vue.component("todo",{
        template: '<div>\
        <slot name="mytodo-title"></slot>\
        <ul>\
        <slot name="mytodo-items"></slot>\
        </ul>\
        </div>'
    });

    Vue.component("todo-title",{
        props:['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props:['item','index'],
        template: '<li>{{item}} <button @click="removeNode">删除</button></li>',
        methods:{
            //template只能调到组件内的方法
            removeNode:function (index) {
                //触发绑定事件
               this.$emit('remove',index);
               // vm.removeItems(index);也可以
            }
        }

    });

    
    var vm = new Vue({
        el: "#app",
        data:{
            booktitle:"新疆大学的书",
            todoitems:['Java书籍','python书籍',"go书籍"]
        },
        methods: {
            removeItems:function (index) {
                    //数组删除函数
                    this.todoitems.splice(index,1);
            }
        }

    });
</script>
</body>
</html>