使用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 相关文章推荐
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
详解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
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
php 基础函数
2017/02/10 PHP
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
python求众数问题实例
2014/09/26 Python
python中实现php的var_dump函数功能
2015/01/21 Python
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
Python写入CSV文件的方法
2015/07/08 Python
使用Python进行目录的对比方法
2018/11/01 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
自主招生自荐信格式
2013/12/03 职场文书
计算机个人求职信范例
2014/01/24 职场文书
初中语文教学反思
2014/02/02 职场文书
工作过失检讨书
2014/02/23 职场文书
美术教师求职信范文
2015/03/20 职场文书
青年志愿者活动感想
2015/08/07 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
五年级数学教学反思
2016/02/16 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL