狂神Vue学习04：插槽slot、自定义事件内容分发

最新推荐文章于 2024-04-18 20:12:13 发布

学而知不足~

最新推荐文章于 2024-04-18 20:12:13 发布

阅读量1.1k

点赞数 1

分类专栏：狂神Vue学习文章标签： vue

本文链接：https://blog.csdn.net/upset_poor/article/details/124183709

版权

狂神Vue学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

插槽slot

在Vue.js中我们使用< slot >元素作为承载分发内容的出口，作者称之为插槽，可以应用在组合组件的场景中

测试

准备制作一个待办事项组件（todo），该组件由待办标题（todo-title）和待办内容（todo-items）组成，但这三个组件又是相互独立的，该怎么操作呢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id = "app">
<!--    <p>列表书籍</p>-->
<!--    <ul>-->
<!--        <li>Java</li>-->
<!--        <li>Java</li>-->
<!--        <li>Java</li>-->
<!--    </ul>-->
    <todo>
        <todo-title slot="slot-title" :title="title"></todo-title>
        <todo-items slot="slot-items" v-for="item in todoItems" v-bind:item1="item"></todo-items>
    </todo>
</div>
<!--引入JS文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    //slot:插槽
    Vue.component("todo",{
        template:
            '<div>\
                <slot name="slot-title"></slot>\
                <ul>\
                   <slot name="slot-items"></slot>\
                </ul>\
            </div>'

    });
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props: ['item1'],
        template: '<li>{{item1}}</li>'
    });
    var vm = new Vue({
        el: '#app',
        data: {
            title: "列表",
            todoItems: ['java','linux','前端']
        }
    });
</script>


</body>
</html>

自定义事件

通过以上代码不难发现，数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢？此时就涉及到参数传递与事件分发了，Vue为我们提供了自定义事件的功能，很好的帮助我们解决了这个问题：使用this.$emit(‘自定义事件名’,参数)，操作过程如下：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id = "app">
<!--    <p>列表书籍</p>-->
<!--    <ul>-->
<!--        <li>Java</li>-->
<!--        <li>Java</li>-->
<!--        <li>Java</li>-->
<!--    </ul>-->
    <todo>
        <todo-title slot="slot-title" :title="title"></todo-title>
        <todo-items slot="slot-items" v-for="(item,index) in todoItems"
                    v-bind:item1="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>
<!--引入JS文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    //slot:插槽
    Vue.component("todo",{
        template:
            '<div>\
                <slot name="slot-title"></slot>\
                <ul>\
                   <slot name="slot-items"></slot>\
                </ul>\
            </div>'

    });
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props: ['item1','index'],
        //只能绑定当前组件的方法
        template: '<li>{{index}}---{{item1}} <button v-on:click="remove">删除</button></li>',
        methods: {
            remove: function (index){
                //this.$emit 自定义事件分发
                this.$emit('remove',index);
            }
        }
    });
    var vm = new Vue({
        el: '#app',
        data: {
            title: "列表",
            todoItems: ['java','linux','前端']
        },
        methods: {
          removeItems: function(index){
              console.log("删除了"+this.todoItems[index]);
              this.todoItems.splice(index,1); //一次删除一个元素

          }
        }
    });
</script>


</body>
</html>

学而知不足~

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
狂神Vue学习04：插槽slot、自定义事件内容分发

插槽slot在Vue.js中我们使用< slot >元素作为承载分发内容的出口，作者称之为插槽，可以应用在组合组件的场景中测试准备制作一个待办事项组件（todo），该组件由待办标题（todo-title）和待办内容（todo-items）组成，但这三个组件又是相互独立的，该怎么操作呢<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title
复制链接

扫一扫