先上代码

<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的功能的更多相关文章
	

    
								
  1. Vue 非父子组件通信方案
		
    Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
    
		
    2. 
						
  2. Vue 非父子组件通信
		
    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
    
		
    3. 
						
  3. Vue的父子组件通信（转载）
		
    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
    
		
    4. 
						
  4. vue.js父子组件通信动态绑定
		
    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
    
		
    5. 
						
  5. vue(三)-父子组件通信
		
    原因 :  Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. props  父组件给子组件传递数据 props:作用是父组件给 ...
    
		
    6. 
						
  6. 详解Vue 非父子组件通信方法（非Vuex）
		
    假设 bb 组件里面有个按钮,点击按钮,把 123 传递给 aa 组件 // 根组件(this.$root) new Vue({ el: '#app', router, render: h => ...
    
		
    7. 
						
  7. vue之父子组件通信
		
    一. 父-子组件间通信 let children={    template:`<div><h1>{{send}}</h1></div>`,  # 将传 ...
    
		
    8. 
						
  8. vue父子组件及非父子组件通信
		
    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
    
		
    9. 
						
  9. 三大前端框架（react、vue、angular2+）父子组件通信总结
		
    公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 远景WEBGIS平台实现客户端SHP文件加载
			
    远景WEBGIS平台的研发目前取得新进展,实现客户端shp文件的加载,可以不经过PC上的数据转换工具转换. 远景WEBGIS平台(RemoteGIS)是基于HTML5自主研发的新一代WEBGIS基础平 ...
    
			
    2. 
						
  2. 根据HTML5 获取当前位置的经纬度【百度地图】【高德地图】
			
    是想让地图的定位用户位置更准确一些. 查看了介绍: http://www.w3school.com.cn/html5/html_5_geolocation.asp 看介绍中拿数据挺简单. <!D ...
    
			
    3. 
						
  3. java 简单工厂 工厂模式
			
    <Head First 设计模式>学习中 分类 简单工厂模式(Simple Factory) 工厂方法模式(Factory Method) 抽象工厂模式(Abstract Factory) ...
    
			
    4. 
						
  4. group by 一条语句实现多条语句的效果
			
    --一个sql 使用 group by 实现 4个 sql 的效果 select ProjectNumber,ClientName,jx,sf,sum(count) as TotalCount fro ...
    
			
    5. 
						
  5. CentOS7路由、端口和服务排障常用命令
			
    1. ip route   显示主机基本路由信息 ~]# ip route default via 172.25.0.254 dev eth0  proto static  metric 1024 1 ...
    
			
    6. 
						
  6. C# WinForm窗体及其控件自适应各种屏幕分辨率
			
    C# WinForm窗体及其控件自适应各种屏幕分辨率 一.说明  我们自己编写程序的界面,会遇到各种屏幕分辨率,只有自适应才能显的美观.实际上,做到这点也很简单,就是首先记录窗体和它上面控件的初始位置 ...
    
			
    7. 
						
  7. python之路——网络基础
			
    你现在已经学会了写python代码,假如你写了两个python文件a.py和b.py,分别去运行,你就会发现,这两个python的文件分别运行的很好.但是如果这两个程序之间想要传递一个数据,你要怎么做 ...
    
			
    8. 
						
  8. Java学习---JBPM[工作流]学习
			
    点击参考 更多参考 链接:https://pan.baidu.com/s/1A1AH5sXu7yhV3mncpH4Z6w 密码:88zw
    
			
    9. 
						
  9. ASP.NET Core 添加静态目录访问、使其它目录可被访问
			
    使用app.UseFileServer 在 public void Configure(){}中,修改或添加 app.UseFileServer(new FileServerOptions() { F ...
    
			
    10. 
						
  10. 关闭window端口445
			
    首先,来查看下系统当前都开放了什么端口,怎样查看呢?调出cmd命令行程序,输入命令”netstat -na“,可以看到. 接着,可以发现当前系统开放了135.445以及5357端口,而且从状态看都处于 ...
    
			
    11.