先上代码

<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. js-小数计算问题
			
    先上图: 什么情况? 原因:js采用二进制进行小数计算 先看十进制的小数转换为二进制的方法: 十进制数的整数位是二进制数的整数位,十进制数的小数位是二进制数的小数位 假如我们有小数111.4(10), ...
    
			
    2. 
						
  2. 横向开关（switch）
			
    横向开关(switch) 一:属性 1.Activity //横向开关 public class SwitchActivity extends Activity { private Switch sw ...
    
			
    3. 
						
  3. 我的C语言连接Mysql之路
			
    1.安装好mysql     2.要实现C连接数据库,需要安装数据库连接器(即MySQL Connector/C)    MySQL Connector/C是一个C语言的client库,这个库是为了实 ...
    
			
    4. 
						
  4. BigInteger方法总结
			
    BigInteger 可以用来解决数据的溢出问题. 下面我总结几种关于BigInteger的常用用法: 1.probablePrime和nextprobablePrime.(判断质数,并返回) Big ...
    
			
    5. 
						
  5. 深入浅出SharePoint2007——定制搜索之无代码篇
			
    需求: 输入值,如果多行文本列包含此搜索关键字,显示对应的查询结果. 解决方案: 使用Form Web Part和Data form web part. 1 创建list,并创建3列 选中默认的lis ...
    
			
    6. 
						
  6. 深入浅出SharePoint——常用的系统账号
			
    NT AUTHORITY\Authenticated Users添加此用户后所有windows认证的ad用户都被授权.注意添加的时候如果搜索不到,可以直接输入Authenticated Users,然 ...
    
			
    7. 
						
  7. pipenv
			
    一. 1. 使用pip安装pipenv及其相关依赖 pip install pipenv 2. 将目录更改为包含你的Python项目的文件夹,并启动Pipenv cd my_project pipen ...
    
			
    8. 
						
  8. nfs 安装配置
			
    系统环境:centos 6.4 x86_64 minimal,记得是199个安装包. 两台机器(可以是虚拟机): 192.168.1.150--->a机器 192.168.1.11-----&g ...
    
			
    9. 
						
  9. Python数据类型-字典
			
    字典(dict) 字典是key:value形式的一种表达形式,例如在Java中有map,JavaScript中的json,Redis中的hash等等这些形式.字典可以存储任意的对象,也可以是不同的数据 ...
    
			
    10. 
						
  10. 前端工程师使用 Deepin 笔记
			
    笔者是一枚前端开发,在学习 Linux 的时候碰到了一个问题 —— 怎么练手?因为自己电脑上面装的是 Windows 系统,所以学习 Linux 的时候没办法进行练习,而敲指令是学习 Linux 最高 ...
    
			
    11.