先上代码

<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. Bootstrap 在线引用
			
    Bootstrap 3.3.0 js 文件 <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.j ...
    
			
    2. 
						
  2. maven(14)-nexus仓库基本用法
			
    登录 启动nexus3,访问http://localhost:8081/  点击右上角sign in登录,默认用户名:admin  密码:admin123,登陆后可以点击右上角的admin,修改默认密 ...
    
			
    3. 
						
  3. win8 便签工具
			
    启动或显示 Sticky Notes : Win+R--->StikyNot.exe 备份Sticky Notes 保存位置 : %AppData%\Microsoft\Sticky Notes ...
    
			
    4. 
						
  4. 用POP动画编写带富文本的自定义动画效果
			
    用POP动画编写带富文本的自定义动画效果 [源码] https://github.com/YouXianMing/UI-Component-Collection [效果] [特点] * 支持富文本 * ...
    
			
    5. 
						
  5. [翻译] HTKDragAndDropCollectionViewLayout
			
    HTKDragAndDropCollectionViewLayout Custom UICollectionViewLayout that works together with a custom U ...
    
			
    6. 
						
  6. VC 6.0 MFC关闭对话框在win7出现崩溃的情况
			
    Ctrl + W 掉出来class管理 添加OnDestory方法 void CPackUpItemToSetDlg::OnDestroy() { exit(1); CDialog::OnDestro ...
    
			
    7. 
						
  7. Excel英语成绩单 吴昊
			
    
			
    8. 
						
  8. 乘风破浪：LeetCode真题_021_Merge Two Sorted Lists
			
    乘风破浪:LeetCode真题_021_Merge Two Sorted Lists 一.前言 关于链表的合并操作我们是非常熟悉的了,下面我们再温故一下将两个有序链表合并成一个的过程,这是基本功. 二 ...
    
			
    9. 
						
  9. 寒假关于计算机课程的学习计划（第二次作业<二>）
			
    由于自己刚从紧张的高中学习中解脱出来,进入大学学习意识不够重视,导致学业与别人相差较大,特别是C语言,所以打算寒假主要先补一补C语言.自己在网上查找了很多资料,包括浙江大学翁凯老师在网易云课堂讲的&l ...
    
			
    10. 
						
  10. Mac下的mongodb安装
			
    mac下的mongodb安装主要有两种方式,一是手工安装,需在官网下载源文件,二是通过homebrew,至于homebrew不做介绍.既然是Mac系统下,我认为直接通过homebrew安装最好,省事还 ...
    
			
    11.