使用v-on绑定自定义事件可以让子组件向父组件传递数据，用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据)

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="../js/vue.js"></script>

 </head>

 <body>

 <div id="app">

 <parent-component></parent-component>

 </div>

 <template id="parent-component">

 <div>

     <p>总数是{{total}}</p>

     <child-component @increment="incrementTotal"></child-component>

     <!--@increment是子组件this.$emit('increment'自定义的事件用来告诉父组件自己干了什么事

     然后会触发父子间incrementTotal的方法来更新父组件的内容)-->

 </div>

 </template>

 <template id="child-component">

     <button @click="increment()">{{mycounter}}</button>

 </template>

 <script>

     var child=Vue.extend({

         template:"#child-component",

        data:function () {

            return {

                mycounter:0

            }

        },

         methods:{

             increment:function(){

                 this.mycounter=10;

                 this.$emit("increment",this.mycounter);//把this.mycounter传递给父组件

             }

         }

     })

     var parent=Vue.extend({

         data:function () {

             return {

                total:0

             }

         },

         methods:{

             incrementTotal:function(newValue){

                 this.total+=newValue;

             }

         },

         template:"#parent-component",

         components:{

             'child-component':child

         }

     })

     var vm=new Vue({

         el:"#app",

         components:{

             'parent-component':parent

         }

     })

 </script>

 </body>

 </html>
@increment是子组件this.$emit('increment'自定义的事件,newValue)用来告诉父组件自己干了什么事
同时还可以传递新的数据给父组件
然后会触发父子间incrementTotal的方法来更新父组件的内容)。
这里需要注意几个点：
1.

图中红色圈中的部分是对应的，子组件在自己的methods方法里面写自己的事件实现，然后再父组件里面写字组件时给子组件绑定上methods方法里面的

事件名称，要一一对应

这里自定义事件里面的要写父组件的方法名，父组件里面定义该方法。

父组件里面的方法可以接收子组件this.$emit('increment',this.mycounter);传递过来的数值:this.mycounter,

到父组件的方法里面就是newValue参数，这样就实现了子组件向父组件传递数据

												


											
vue子组件使用自定义事件向父组件传递数据的更多相关文章
	

    
								
  1. vue第八单元(组件通信 子父，父子组件通信 自定义事件 事件修饰符 v-model props验证 )
		
    第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
    
		
    2. 
						
  2. vue子组件的自定义事件
		
    父子组件的信息传递无碍就是父组件给子组件传值(props和$attrs)和父组件触发子组件的事件($emit) 之前已经谈过了父组件给子组件传值了,现在来说说父组件触发子组件的自定义事件吧-- 实际上 ...
    
		
    3. 
						
  3. 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    4. 
						
  4. 子组件通过 $emit 触发父组件的自定义事件
		
    子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData} ...
    
		
    5. 
						
  5. Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）
		
    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
    
		
    6. 
						
  6. Vue的父子组件v-model双向绑定，父组件修改子组件中绑定的v-model属性
		
    先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...
    
		
    7. 
						
  7. vuejs组件交互 - 02 - 事件中心管理组件间的通信
		
    事件中心 这个可以是一个空的全局的Vue实例,其他的组件利用这个实例emit和on自定义事件,这样组件定义了自己的事件处理方法. import Vue from 'Vue' window.eventH ...
    
		
    8. 
						
  8. 42.VUE学习之--组件之子组件使用$on与$emit事件触发父组件实现购物车功能
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    9. 
						
  9. vue 【 子子组件   =>   子组件   =>   父组件 】 的事件和参数的传递
		
    1,子子组件  TodoItem.vue     <template>   <div class="todo-item" :class="{'is-co ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. latex学习笔记----数学公式
			
    https://www.jianshu.com/p/d7c4cf8dc62d 1.数学公式在  \(  和  \)之间,$和$之间,或者\begin{math}和\end{math}之间 2.对于较大 ...
    
			
    2. 
						
  2. Deep-Learning-with-Python] 文本序列中的深度学习
			
    https://blog.csdn.net/LSG_Down/article/details/81327072 将文本数据处理成有用的数据表示 循环神经网络 使用1D卷积处理序列数据 深度学习模型可以 ...
    
			
    3. 
						
  3. idea中maven项目依赖jar一直标红线
			
    网上maven仓库中无法下载某些jar包,这时候就需要手动下载,并导入maven, 导入命令demo: mvn install:install-file -DgroupId=javax.media - ...
    
			
    4. 
						
  4. 2017年3月16工作日志【mysql更改字段参数、java8 map()调用方法示例】
			
    修改某个表的字段类型及指定为空或非空 >alter table 表名称 change 字段名称 字段名称 字段类型 [是否允许非空],变更字段名称及属性 >alter table 表名称  ...
    
			
    5. 
						
  5. 九、Shell脚本高级编程实战第九部
			
    一.监控mysql主从同步是否异常,如果异常,发送短信给管理员 1)开发一个守护进程脚本每30秒实现检测一次. 2)如果错误号是:1158.1159.1008.1007.1062,请跳过 3)请使用数 ...
    
			
    6. 
						
  6. Python——课程数据统计分析
			
    介绍 在该章节中我们将利用提供的课程数据来进行一次实战性质的时间序列和聚类分析. 知识点 数据处理 数据可视化 中文分词 文本聚类 数据概览 本次课程的数据来源于运行过程中产生的真实数据,我们对部分数 ...
    
			
    7. 
						
  7. ERP上线通用模板
			
    一.引言    随着现代信息技术的发展与广泛应用,现代社会的快速发展和越来越追求效率的现状,对各行各业的管理的水平有了进一步的提高.XX企业作为我国的国民经济发展的基础产业,其信息化建设的水平直接关系 ...
    
			
    8. 
						
  8. Python 语言基础
			
    Python 语言基础 Python 开发环境 计算机组成 编程语言(计算机语言)是人们为了控制计算机,而设计的一种符号和文字的组合,从而实现向计算机发出指令. 形式是符号和文字的组合 目的是为了控制 ...
    
			
    9. 
						
  9. VScode中Python的交互式命令环境使用笔记
			
    前言 时间比较久了,忘记了具体配置了,不讲搭建了,提供参https://www.zhihu.com/question/49799276,或自行谷歌,常用的插件Python和Code Runner. 本 ...
    
			
    10. 
						
  10. python学习笔记（15）pymysql数据库操作
			
    pymysql数据库操作 1.什么是PyMySQL 为了使python连接上数据库,你需要一个驱动,这个驱动是用于与数据库交互的库. PyMySQL : 这是一个使Python连接到MySQL的库,它 ...
    
			
    11.