使用Vue父子组件通信实现todolist的功能示例代码


Posted in Javascript onApril 11, 2019

先上代码

<body>
  <div id="root">
    <div>
      <input v-model="inputValue" />
      <button @click="handleClick">submit</button>
    </div>
      <ul>
        <todolist v-for="(item,index) of list"
         :key="index" 
         :content="item"
         :index="index"
         @delete="handle"
        ></todolist>
      </ul>
  </div>
  <script>

    Vue.component("todolist",{
      props: ['content','index'],
      template: '<li @click="handleDelete">{{content}}</li>',
      methods: {
        handleDelete:function(){
          this.$emit('delete',this.index)
        }
      }
      })

    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)
        }
      }
    })
  </script>
</body>

创建todolist的基本结构

<div id="root">
    <div>
      <input v-model="inputValue" />
      <button @click="handleClick">submit</button>
    </div>
      <ul>
        <todolist v-for="(item,index) of list"
         :key="index" 
         :content="item"
         :index="index"
         @delete="handle"
        ></todolist>
      </ul>
  </div>

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

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

Vue.component("todolist",{
      props: ['content','index'],
      template: '<li @click="handleDelete">{{content}}</li>',
      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对应项也会被删除掉。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
jQuery实现的placeholder效果完整实例
Aug 02 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
vue实现循环切换动画
Oct 17 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
详解jQuery设置内容和属性
Apr 11 #jQuery
js作用域和作用域链及预解析
Apr 11 #Javascript
关于js陀螺仪的理解分析
Apr 11 #Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 #Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 #Javascript
vue实现新闻展示页的步骤详解
Apr 11 #Javascript
记一次用vue做的活动页的方法步骤
Apr 11 #Javascript
You might like
PHP 基本语法格式
2009/12/15 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
javascript新手语法小结
2008/06/15 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
python requests 使用快速入门
2017/08/31 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
Python之字典对象的几种创建方法
2020/09/30 Python
python中round函数保留两位小数的方法
2020/12/04 Python
python复合条件下的字典排序
2020/12/18 Python
Python实现简单的2048小游戏
2021/03/01 Python
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
保送生自荐信范文
2013/10/06 职场文书
在校学生职业规划范文
2014/01/08 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python
pytorch 实现变分自动编码器的操作
2021/05/24 Python
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL