vue.js中$emit的理解

最新推荐文章于 2024-06-21 08:47:39 发布
最新推荐文章于 2024-06-21 08:47:39 发布
阅读量2.3k 收藏
点赞数 1
文章标签： vue

官网介绍的很简单

例子:$emit('example1',[12,'kkk'])，不去练练不知道什么意思,可以告诉你，就是触发自定义事件example1(或者函数),[]为参数


案例


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="counter-event-example">
            <p>{{ total }}</p>
            <button-counter v-on:example1="exampleTotal"></button-counter>
            <button-counter v-on:example2="exampleTotal"></button-counter>
        </div>
    </body>
    <script src="vue/vue.min.js"></script>
    <script>
        Vue.component(‘button-counter‘,{
            template:‘<button v-on:click="example">{{ counter }}</button>‘,
            data:function(){
                return {counter: 0}//组件数据就是这样的，函数式的，请注意
            },
            methods:{
                example1:function(){
                    this.counter += 1;
                    this.$emit(‘example1‘,[12,‘kkk‘]);//$emit
                }
            }
        });
        new Vue({
            el:‘#counter-event-example‘,
            data:{
                total:0
            },
            methods:{
                exampleTotal:function(e){
                    this.total += 1;
                    console.log(e);
                }
            }
        });
    </script>
</html>
 

组件绑定了事件click然后运行increment
 

然后this.counter+=1;this.$emit("example1",[12,'kkk'])
 

然后触发事件increment1，参考文献有点乱，其他的不用管太多
 

然后<button-counter v-on:example1='exampleTotal'></button-counter>
 

v-on相当于监听吧  就触发 exampleTotal
 

输出 //[12,'kkk']
 

 

 

 

 

原文地址：http://www.cnblogs.com/hhweb/p/6678716.html

 

 


                

        

        

    




    

      

        

            

              
                
                  试试看168
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
Vue.js $emit方法介绍

				
			

			

				

					qq_41700374的博客
				

				

					12-06
					
					1523
					
				

			

		

		

			
				
vm.$emit(eventName, [...args])

参数：
{string} eventName
	[...args]
第一种情况：


Vue.component('welcome-button', {
  template: `
    <button v-on:click="$emit('welcome')">
      Click me to be welcome...

			
		

	



                

              
                



	

		

			

				
					
emit.js:JavaScript中的高效极简事件发射器

				
			

			

				

					05-24
				

			

		

		

			
				
emit.js
 JavaScript中的高效极简事件发射器。
安装
它可以与bower或npm一起使用： 
 bower install emit.js
npm install emit.js
在HTML中包含emit.min.js ，并且在全局范围内现在可以使用emit对象： 
 < script type =" text/javascript " src =" /path/to/bower_components/emit.js/dist/emit.min.js " > </ script >
 或者，您可以使用模块管理器来避免全局作用域： 
 var emit = require ( 'emit.js' ) ;
// or es6 import
import emit from 'emit.js' ;
用法
创建一个事件发射器
 var emitter = emit ( ) ;
在上

			
		

	



                


  
              

                


	

		

			

				
					
【vuejs】 $on、$once、$off、$emit 事件监听方法详解以及项目实战

					
最新发布

				
			

			

				

					工作的日常记录和平凡的生活分享
				

				

					06-21
					
					1773
					
				

			

		

		

			
				
vm.$on是Vue实例用来监听自定义事件的方法。它允许开发者在Vue实例上注册事件监听器，当事件被触发时，指定的回调函数会被执行。

			
		

	





	

		

			

				
					
Vue.JS中的emit

				
			

			

				

					m0_57417006的博客
				

				

					12-10
					
					678
					
				

			

		

		

			
				
是用于在子组件中触发自定义事件的方法。它允许子组件向父组件发送消息，或者在兄弟组件之间进行通信。这种通过自定义事件进行组件通信的方式使得组件可以更灵活、解耦，同时提高了代码的可维护性。父组件可以监听并响应这个事件，从而执行一些特定的逻辑。，你可以定义自己的事件，并在适当的时候触发这些事件。是在子组件中定义一个自定义事件，然后通过调用。方法，从而获取了子组件传递的消息，并更新了。中的按钮被点击时，它调用了。以下是一个简单的示例，说明了。

			
		

	



		

			
		



	

		

			

				
					
js-this.$emit()方法，组件A调用组件B中的newB()方法，4种路由跳转

				
			

			

				

					2301_76671906的博客
				

				

					11-28
					
					1020
					
				

			

		

		

			
				
this.$emit()方法 向父组件发送自定义事件custom，传递数据，父组件监听自定义事件执行对应的逻辑。2.this.$router.push()与this.$router.replace()3.this.router.go(n)以及this.router.back()

			
		

	





	

		

			

				
					
对vue.js中this.$emit的深入理解

				
			

			

				

					10-18
				

			

		

		

			
				
在Vue.js中，`this.$emit` 是一个非常重要的功能，它允许子组件与父组件进行通信，将数据或事件传递回上层。通过深入理解`this.$emit`的工作原理，开发者可以更好地构建复杂的组件结构，并实现灵活的数据交互。下面...

			
		

	





	

		

			

				
					
详解vue中this.$emit()的返回值是什么

				
			

			

				

					10-17
				

			

		

		

			
				
Vue.js 是一个流行的前端框架，它提供了一种声明式的数据绑定和组件化的方式来构建用户界面。在Vue中，组件间的通信是至关重要的，而`this.$emit()`是Vue实例的一个方法，用于触发当前组件的自定义事件。这篇文章将...

			
		

	





	

		

			

				
					
vue.js $refs和$emit 父子组件交互的方法

				
			

			

				

					10-18
				

			

		

		

			
				
总的来说，$refs和$emit是Vue.js开发中父子组件通信的基石，掌握它们的用法对于深入理解和使用Vue.js有着重要意义。在实际开发过程中，可以基于这些基础功能来实现更加复杂和灵活的组件交互逻辑。随着Vue.js版本的...

			
		

	





	

		

			

				
					
vue中$refs, $emit, $on, $once, $off的使用详解

				
			

			

				

					10-16
				

			

		

		

			
				
在Vue.js框架中，$refs, $emit, $on, $once, 和 $off 是用于组件间通信的重要机制。下面将分别对它们进行详细的解释和示例说明。  1. **$refs**  `$refs` 是 Vue 提供的一种机制，允许父组件引用其子组件实例。在...

			
		

	





	

		

			

				
					
Vue $emit()不能触发父组件方法的原因及解决

				
			

			

				

					10-15
				

			

		

		

			
				
在Vue.js中，组件间的通信是通过事件和监听器来实现的，其中 `$emit` 是子组件用来触发自定义事件的关键方法。当遇到 `$emit` 无法触发父组件方法的情况，开发者可能会感到困惑。本文将深入探讨这个问题的原因以及...

			
		

	





	

		

			

				
					
vue与$emit。

				
			

			

				

					studyis01的博客
				

				

					11-20
					
					740
					
				

			

		

		

			
				
vue与$emit
1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。
vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn；

...

			
		

	





	

		

			

				
					
vue中$emit的理解

				
			

			

				

					zyz00000000的博客
				

				

					12-05
					
					2497
					
				

			

		

		

			
				
子组件通过$emit向父组件传递信息，使父组件触发methods方法，同时，信息中可以携带值，传递给父组件，父组件的methods方法可以对值进行处理。

vue官方文档中对$emit有详细说明

补充内容：父组件中绑定的事件默认是自定义事件，所以需要通过子组件$emit去触发，但是原始事件（click等），可以通过@click.native直接触发；

项目中的父子组件的写法

（1）只触发父组...

			
		

	





	

		

			

				
					
$emit的用法

				
			

			

				

					m0_57263959的博客
				

				

					08-09
					
					1458
					
				

			

		

		

			
				
是Vue.js中用于实现组件之间通信的一种机制，使得父子组件能够互相传递信息和触发事件，以实现更好的交互和协作。注意，在不同的框架或编程环境中，在Vue.js中，每个组件都可以拥有自己的状态和方法。方法来触发一个自定义事件，同时传递一些数据。组件可以通过监听这个事件来获取信息或执行相应的操作。来监听子组件触发的事件，并执行相应的操作。用于在父子组件之间传递消息或触发事件。在上面的例子中，当子组件触发名为。方法会被调用，并且传递的。子组件想要与其父组件通信。在父组件中，你可以使用。的事件时，父组件中的。

			
		

	





	

		

			

				
					
Vue中的$emit的使用方法与理解

				
			

			

				

					qq_34082921的博客
				

				

					01-13
					
					5589
					
				

			

		

		

			
				
>  - 学到Vue的组件内传值时，props父传子还能理解，但是对子组件给父组件传值（也就是$emit方法），对于这个$emit我感觉有点绕，知道它的作用，但是对它的用法还是掌握不好，主要还是对于为什么这么用很疑惑。
>- 对父组件给子组件传值很简单，也很好理解。父组件给子组件传值只要在子组件标签内用V-bind写一个函数方法（也可以传参数）用props接收就可以直接使用了。但是到子组件给父组件传值就变得复杂了，首先要先在子组件标签内声明触发$emit的事件，触发条件后用$emit发送自定义事件（包含事件

			
		

	





	

		

			

				
					
vue入门（四）组件基础，$emits简单用法

				
			

			

				

					weixin_37778355的博客
				

				

					02-20
					
					996
					
				

			

		

		

			
				
vue父子页面触发事件，emit用法，组件用法

			
		

	





	

		

			

				
					
vue中emit的用法

					
热门推荐

				
			

			

				

					程文英
				

				

					09-11
					
					2万+
					
				

			

		

		

			
				
vue中子传父参数的方法共有两种：
1、子组件通过emit传输
2、通过自定义组件传输
下列优先讲解下其emit的传输方法
在父组件中
（1）首先需要定义其改变的函数，一般emit多用于点击事件，例如我目前所在地的名称是北京，我想通过子组件的点击，导致我的名称发生其改变
（2）定义其data属性存储器数据
<template>
  <div class="hello">
    <h2>我是父组件,我需要建立一些参数</h2>
    <h3>我所

			
		

	





	

		

			

				
					
node.js 中 emit() 和 on() 的一个小发现

				
			

			

				

					lzrit的博客
				

				

					02-11
					
					6827
					
				

			

		

		

			
				
node 中的 EventEmitter 类提供了监听事件的方法 on(event, listener) 和 触发事件的方法 emit(event, [arg1], [arg2], […])

emit触发信号之后，on监听到事件后程序是如何执行的呢？

var events = require("events");
var eventEmitter = new events.EventEmitt...

			
		

	





	

		

			

				
					
vue组件通信---子传父（自定义事件$emit(eventName,data)）

				
			

			

				

					muzidigbig的博客
				

				

					11-20
					
					8948
					
				

			

		

		

			
				
一、概括

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了。

绑定事件监听


// 方式一: 通过 v-on 绑定
@delete_todo="deleteTodo"

// 方式二: 通过$on()
this.$refs.xxx.$on('delete_t...
vue子组件调用父组件中的方法

			
		

	





	

		

			

				
					
Vue.js面试精华：初级与进阶问题详解

				
			

			

				

					
				

			

		

		

			
				
Vue.js 是一种流行的前端 JavaScript 框架，用于构建...以上知识点涵盖了Vue.js面试过程中可能涉及的关键点，无论是初级开发者还是经验丰富的专业人士，理解和掌握这些概念将有助于在面试中展示自己的技能和理解深度。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值