先上代码

<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. input  button 与 submit 的区别
			
    在表单中,我们会经常提交数据,通常使用<input type="submit" value="提交"/>进行提交数据, 另一种方式是使用<bu ...
    
			
    2. 
						
  2. CentOS7安装minio
			
    [root@localhost ~]# wget https://dl.minio.io/server/minio/release/linux-amd64/minio -bash: wget: 未找到 ...
    
			
    3. 
						
  3. 八、angularjs 中 filter在controller中的使用--避免多次遍历
			
    filter在html页面的使用司空见惯,比如: filter在controller中使用可以避免多次使用angular.foreach,来进行遍历.例如: 如果使用filter,则会让代码简洁而且明 ...
    
			
    4. 
						
  4. java笔记--重定向输出流实现程序输出到日志
			
    重定向输出流实现程序输出到日志 --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3877248.html "谢谢-- 利用Sy ...
    
			
    5. 
						
  5. Docker-容器数据卷
			
    docker容器数据卷相当于外置的移动硬盘 docker容器数据卷主要功能是:容器的持久化.容器间继承+共享数据 特点: (1)数据卷可以容器之间共享或重用数据 (2)卷中更改可以直接生效 (3)数据 ...
    
			
    6. 
						
  6. [翻译] ASCScreenBrightnessDetector
			
    ASCScreenBrightnessDetector ASCScreenBrightnessDetector lets you easily detect screen brightness cha ...
    
			
    7. 
						
  7. React学习笔记（五）State&声明周期
			
    React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...
    
			
    8. 
						
  8. Java学习---RMI 技术分析[Hessian]
			
    一.什么是Hessian Hessian 是一个基于 binary-RPC 实现的远程通讯 library.使用二进制传输数据.Hessian通常通过Web应用来提供服务,通过接口暴露.Servlet ...
    
			
    9. 
						
  9. My personal website:http://47.94.240.229:8080/yjh/project/
			
    My personal website:  http://47.94.240.229:8080/yjh/project/
    
			
    10. 
						
  10. LAMP配置NFS页面共享,autofs实现挂载,DNS实现名称解析,纯手动操作
			
    0.实验架构: 共6台服务器 分工如下: 服务器 职责 IP地址 Centos版本 描述 A DNS 172.18.7.70 7 B Apache 172.18.7.71 7 httpd+php-fp ...
    
			
    11.