利用Vue父子组件通信怎么实现一个todolist功能

这篇文章将为大家详细讲解有关利用Vue父子组件通信怎么实现一个todolist功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联-专业网站定制、快速模板网站建设、高性价比广陵网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式广陵网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖广陵地区。费用合理售后完善,十载实体公司更值得信赖。

先上代码


  
    
             submit     
      
                   
  
  

创建todolist的基本结构


    
             submit     
      
                   
  

在这里我们创建了一个todolist标签作为父组件,让它在里面循环遍历list作为我们的输出,同时定义了一个delete的监听事件。

接下来在script标签里定义子组件

Vue.component("todolist",{
      props: ['content','index'],
      template: '{{content}}',
      methods: {
        handleDelete:function(){
          this.$emit('delete',this.index)
        }
      }
      })

定义了一个全局类型的子组件,子组件的props选项能够接收来自父组件数据,props只能单向传递,即只能通过父组件向子组件传递,这里将上面父组件的content和index传递下来。

将li标签作为子组件的模板,添加监听事件handleDelete用与点击li标签进行删除。

在下面定义子组件的handleDelete方法,用this.$emit向父组件实现通信,这里传入了一个delete的event,参数是index,父组件通过@delete监听并接收参数

接下来是Vue实例

new Vue({
      el:"#root",
      data: {
        inputValue:'',
        list:[]
      },
      methods: {
        handleClick:function(){
          this.list.push(this.inputValue)
          this.inputValue=''
        },
        handle:function(index){
          this.list.splice(index,1)
        }
      }
    })

handleClick方法实现每次点击submit按钮时向list里添加值,在每次添加之后将输入框清空。

而handle方法则是点击删除li标签,这里通过接受传入的index参数来判断点击的是哪一个li

这是删除前:

利用Vue父子组件通信怎么实现一个todolist功能

这是删除后:

利用Vue父子组件通信怎么实现一个todolist功能

总结:

通过点击子组件的li实现向外触发一个delete事件,而父组件监听了子组件的delete事件,执行父组件的handle方法,从而删除掉对应index的列表项,todolist中的list对应项也会被删除掉。

关于利用Vue父子组件通信怎么实现一个todolist功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


网页名称:利用Vue父子组件通信怎么实现一个todolist功能
链接URL:http://azwzsj.com/article/pggcpe.html

其他资讯