Vue(11) —— 自定义事件内容分发

最新推荐文章于 2024-07-29 11:31:25 发布

原来是小别扇

最新推荐文章于 2024-07-29 11:31:25 发布

阅读量720

点赞数 4

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Jzandth/article/details/108781704

版权

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了Vue中v-on的简写@，以及如何利用自定义事件实现组件与Vue实例之间的通信，特别是如何在组件中触发Vue对象的删除方法来动态更新数据。通过实例解析了如何利用this.$emit触发自定义事件，以及splice方法删除数组元素，同时展示了相关代码实现。

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

1.什么是事件

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行

2.需求

在前面插槽的基础上，我们需要实现点击删除按钮就删除一个li的数据
在这里插入图片描述

3.分析

在这里插入图片描述
上图

经过以上代码不难发现，数据项在 Vue 的实例中，但删除操做要在组件中完成，那么组件如何才能删除 Vue 实例中的数据呢？此时就涉及到参数传递(使用组件的props属性完成)与事件分发了，Vue 为咱们提供了自定义事件的功能很好的帮助咱们解决了这个问题；使用this.$emit(‘自定义事件名’, 参数)

组件和Vue对象是平行的，不是包含的，所以在正常情况下组件是不能操作到Vue对象中的数据的

组件除了可以定义模板之外，还可以在它的内部定义方法，这一点和Vue对象一样，并且和Vue对象一样，组件中的定义的方法只能在组件作用范围内有效

    Vue.component("todo-items",{
        props: ["item"],
        template:"<li>{{item}} &nbsp;&nbsp;<button @click='remove'>删除</button></li>",
        methods:{
            remove:function (){
                alert("调用组件的删除方法")
            }
        }
    })

在这里插入图片描述

所以我们应该思考怎么通过点击按钮调用到Vue对象中的removeItem方法删除数组元素

js实现删除数组元素的方法
splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素:

//使用语法
splice(startIndex,  从startIndex开始删除多少个元素,  [从startIndex开始添加的新元素列表])

在这里插入图片描述

  methods: {
      removeItem: function (index){//删除的数组元素的下标
          console.log("删除了"+this.todoItems[index]+",OK!")
          this.todoItems.splice(index,1);
          //从index开始删除1个元素，即就是删除index指向的这个元素
      }
  }

在这里插入图片描述

实现组件调用Vue方法：那么方法removeItem的参数index应该由组件的方法传入，所以我们应该将集合中数据的index传入组件中；在前面学习集合遍历的时候，我们说过有一个隐藏的参数index，它就记录了这个item在集合中的index，所以我们可以为组件的props数组中添加一个新的属性index，并在视图中将index和props数组中的index属性进行v-bind

4.代码实现

怎么调用Vue对象的方法：Vue的自定义事件功能可以解决，语法：this.$emit(‘自定义事件名’, [参数])

代码

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="vue" >
    <todo>
        <todo-items slot="items" v-for="(item,index) in todoItems" :key="index" :item_value="item" :itemIndex="index" v-on:remove="removeItem(index)" ></todo-items>
        <todo-title slot="title" :title="title"></todo-title>

    </todo>
</div>

<!--引入 JS 文件-->
<script src="../../../vue.js"></script>
<script type="text/javascript">
    Vue.component("todo",{
        template:"<div>\
                    <slot name='title'></slot>\
                    <ul>\
                        <slot name='items'></slot>\
                    </ul>\
                  </div>"

    })
    Vue.component("todo-title",{
        props: ["title"],
        template: "<a v-bind:href='title'>点击我</a>"
    })
    Vue.component("todo-items",{
        props: ["item_value","item_index"],
        template:"<li>{{item_value}} &nbsp;&nbsp;<button @click='remove'>删除</button></li>",
        methods:{
            remove:function (){
                this.$emit("remove")
            }
        }
    })

    var vm = new Vue({
        el: '#vue',
        data:{
            title:"https://www.baidu.com/",
            todoItems:["java基础","Java框架","Vue"]
        },
        methods: {
            removeItem: function (index){//删除的数组元素的下标
                console.log("删除了"+this.todoItems[index]+",OK!")
                this.todoItems.splice(index,1);
            }
        }
    });
</script>


</body>
</html>