使用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支持带x身份证号码验证函数
Aug 10 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
jquery datatable服务端分页
Aug 31 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
原生javascript如何实现共享onload事件
Jul 03 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伪静态写法附代码
2008/06/20 PHP
深入解析php中的foreach函数
2013/08/31 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
python实现360的字符显示界面
2014/02/21 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
python实现简单多人聊天室
2018/12/11 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
python manage.py runserver流程解析
2019/11/08 Python
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
客户代表自我评价范例
2013/09/24 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
甜品店创业计划书
2014/09/21 职场文书
学生检讨书如何写
2014/10/30 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript