使用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 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
关于COOKIE个数与大小的问题
Jan 17 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
k8s node节点重新加入master集群的实现
Feb 22 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
香妃
2021/03/03 冲泡冲煮
php实现的css文件背景图片下载器代码
2014/11/11 PHP
php制作简单模版引擎
2016/04/07 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
php探针不显示内存解决方法
2019/09/17 PHP
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
Python实现的一个简单LRU cache
2014/09/26 Python
用Python中的字典来处理索引统计的方法
2015/05/05 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
python statsmodel的使用
2020/12/21 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
党员2014两会学习心得体会
2014/03/17 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android