用Vue的父子组件通信实现todolist的功能
先上代码
<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
这是删除前：
这是删除后：
总结：通过点击子组件的li实现向外触发一个delete事件，而父组件监听了子组件的delete事件，执行父组件的handle方法，从而删除掉对应index的列表项，todolist中的list对应项也会被删除掉。
用Vue的父子组件通信实现todolist的功能的更多相关文章
- Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
- Vue 非父子组件通信
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
- Vue的父子组件通信（转载）
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
- vue.js父子组件通信动态绑定
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- vue(三)-父子组件通信
原因 : Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. props 父组件给子组件传递数据 props:作用是父组件给 ...
- 详解Vue 非父子组件通信方法（非Vuex）
假设 bb 组件里面有个按钮,点击按钮,把 123 传递给 aa 组件 // 根组件(this.$root) new Vue({ el: '#app', router, render: h => ...
- vue之父子组件通信
一. 父-子组件间通信 let children={ template:`<div><h1>{{send}}</h1></div>`, # 将传 ...
- vue父子组件及非父子组件通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- 三大前端框架（react、vue、angular2+）父子组件通信总结
公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...
随机推荐
- Java web中的web-xml中标签定义之jsp-config
<jsp-config> 包括<taglib> 和<jsp-property-group> 两个子元素. 其中<taglib>元素在JSP 1.2时就已 ...
- 怎样修复grub开机引导(grub rescue)
很多时候,特别是在linux调整分区后,开机重启时会出现 error : unknow filesystem grub rescue> 的字样,系 ...
- 中国国内 - 可用API合集
中国国内 - 可用API合集 收录一篇中国国内可用API合集,分享给大家 目录 笔记 出行 词典 电商 地图 电影 即时通讯 开发者网站 快递查询 旅游 社交 视频 天气 团队协作 图片与图像处理 外 ...
- 131.006 Unsupervised Learning - Feature Scaling | 非监督学习 - 特征缩放
@(131 - Machine Learning | 机器学习) 1 Feature Scaling transforms features to have range [0,1] according ...
- python基础——Linux系统下的文件目录结构
单用户操作系统和多用户操作系统 单用户操作系统:指一台计算机在同一时间只能由一个用户使用,一个用户独自享用系统的全部硬件和软件资源. 多用户操作系统:指一台计算机在同一时间可以由多个用户使用,多个用户 ...
- asp.net session 保存实体类对象
存:User user=new User();session["USER"]=user; 取:User u= (User ) session["USER"];
- 动态展开tableView的cell[1]
动态展开tableView的cell[1] 源码地址:https://github.com/xerxes235/HVTableView 虽然作者写的demo很好看,可是,你很难理解他是怎么玩的-_-! ...
- setfacl 命令的常用用法
setfacl命令----可以用来细分linux下的文件权限. chmod命令----可以把文件权限分为u,g,o三个组,而setfacl可以对每一个文件或目录设置更精确的文件权限. 换句话说,set ...
- kafka概要设计
Kafka核心功能 即:高性能的消息发送与高性能的消息消费 下载安装包后即可启动Kafka服务器,但是此前需要首先启动Zookeeper服务器,Zookeeper是为Kafka提供协调服务的工具,Ka ...
- iOS 内存泄漏监测自动化
在 Android 上,Square 这家公司提供了非常有名的工具: leakcanary ,来帮助开发者们在日常开发过程中就能够发现内存泄漏.但在 iOS 上呢?在 Google 的时候,我发现了两 ...