先上代码

<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. linux下close 掉socket 之后 阻塞的recv 不会立即返回
			
    转载自:http://www.cnblogs.com/wainiwann/p/3942203.html 在开发的一个基于rtmp聊天的程序时发现了一个很奇怪的现象. 在windows下当我们执行 cl ...
    
			
    2. 
						
  2. byr面经两则
			
    人人,金山西山居,腾讯互娱,微信,网易游戏offer及面经 首先感谢师兄在两年前发的贴([天道酬勤] 腾讯.百度.网易游戏.华为Offer及笔经面经 ),这篇文章对我帮助很大. 我写这篇文章一是为了感 ...
    
			
    3. 
						
  3. python面向对象编程（2）—— 实例属性，类属性，类方法，静态方法
			
    1  实例属性和类属性 类和实例都是名字空间,类是类属性的名字空间,实例则是实例属性的名字空间. 类属性可通过类或实例来访问.只有通过类名访问时,才能修改类属性的值. 例外的一种情况是,当类属性是一个 ...
    
			
    4. 
						
  4. 添加PHP扩展模块
			
    php安装好后,可能在初次安装时,会有些模块会有遗漏,但是我们又不想重新编译php,因为耗时是比较长的.我们可不可以在不重新编译安装php的情况下,来为php单独添加某一个模块呢?查找资料,发现还是有 ...
    
			
    5. 
						
  5. Linux命令--网络管理
			
    write命令 Linux write命令用于传讯息给其他使用者. 使用权限:所有使用者. 语法 write user [ttyname] 参数说明: user : 预备传讯息的使用者帐号 ttyna ...
    
			
    6. 
						
  6. GitLab-CI与GitLab-Runner
			
    一.持续集成(Continuous Integration) 要了解GitLab-CI与GitLab Runner,我们得先了解持续集成是什么. 持续集成是一种软件开发实践,即团队开发成员经常集成他们 ...
    
			
    7. 
						
  7. IDEA 常用插件收藏
			
    1.maven helper 查看maven依赖,解决jar包冲突. 2.Alibaba Java Coding Guidelines  代码风格遵循阿里java规范. 3.Lombok 简化实体中的 ...
    
			
    8. 
						
  8. Java虚拟机10：Client模式和Server模式的区别
			
    部分商用虚拟机中,Java程序最初是通过解释器对.class文件进行解释执行的,当虚拟机发现某个方法或代码块运行地特别频繁的时候,就会把这些代码认定为热点代码Hot Spot Code(这也是我们使用 ...
    
			
    9. 
						
  9. Mac Sublime Text 3
			
    安装Package Control安装过程: 使用快捷键 control + ` 或者菜单栏选择View > Show Console安装Package Control参考官方页面.Sublim ...
    
			
    10. 
						
  10. 用Qt制作的Android独立游戏《吃药了》公布
			
           一个多月的努力最终有了回报,我自己研究制作的独立游戏<吃药了>.最终在360应用商店上线了.        这一款游戏呢.使用的是Qt开发的.事实上开发这款简单的应用之前.我 ...
    
			
    11.