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

目录

    • 1.什么是事件
    • 2.需求
    • 3.分析
    • 4.代码实现


  • 在上一篇博客中我们介绍了"v-bind:“的简写,为” : "
  • 这一篇博客介绍"v-on:“的简写,为” @ "
    Vue(11) —— 自定义事件内容分发_第1张图片

1.什么是事件

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


2.需求

    在前面插槽的基础上,我们需要实现点击删除按钮就删除一个li的数据
Vue(11) —— 自定义事件内容分发_第2张图片


3.分析

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

  • 组件和Vue对象是平行的,不是包含的,所以在正常情况下组件是不能操作到Vue对象中的数据的
  • 组件除了可以定义模板之外,还可以在它的内部定义方法,这一点和Vue对象一样,并且和Vue对象一样,组件中的定义的方法只能在组件作用范围内有效
        Vue.component("todo-items",{
           
            props: ["item"],
            template:"
  • { {item}}   
  • "
    , methods:{ remove:function (){ alert("调用组件的删除方法") } } })

Vue(11) —— 自定义事件内容分发_第4张图片
Vue(11) —— 自定义事件内容分发_第5张图片
在这里插入图片描述
Vue(11) —— 自定义事件内容分发_第6张图片
Vue(11) —— 自定义事件内容分发_第7张图片
Vue(11) —— 自定义事件内容分发_第8张图片
    所以我们应该思考怎么通过点击按钮调用到Vue对象中的removeItem方法删除数组元素


  • js实现删除数组元素的方法
        splice()方法是修改Array的“万能方法”,它可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素:
//使用语法
splice(startIndex,  从startIndex开始删除多少个元素,  [从startIndex开始添加的新元素列表])

Vue(11) —— 自定义事件内容分发_第9张图片

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

Vue(11) —— 自定义事件内容分发_第10张图片

  • 实现组件调用Vue方法:那么方法removeItem的参数index应该由组件的方法传入,所以我们应该将集合中数据的index传入组件中;在前面学习集合遍历的时候,我们说过有一个隐藏的参数index,它就记录了这个item在集合中的index,所以我们可以为组件的props数组中添加一个新的属性index,并在视图中将index和props数组中的index属性进行v-bind
    Vue(11) —— 自定义事件内容分发_第11张图片
    在这里插入图片描述

4.代码实现

  • 怎么调用Vue对象的方法:Vue的自定义事件功能可以解决,语法:this.$emit(‘自定义事件名’, [参数])
  • 代码
    
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
    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>
    
    
    <script src="../../../vue.js">script>
    <script type="text/javascript">
        Vue.component("todo",{
            
            template:"
    \ \
      \ \
    \
    "
    }) Vue.component("todo-title",{ props: ["title"], template: "点击我" }) Vue.component("todo-items",{ props: ["item_value","item_index"], template:"
  • { {item_value}}   
  • "
    , 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>

Vue(11) —— 自定义事件内容分发_第12张图片
在这里插入图片描述
在这里插入图片描述

  • 测试
    Vue(11) —— 自定义事件内容分发_第13张图片
    测试完成!

你可能感兴趣的:(Vue,vue)