vue中函数有回调参数，添加参数时如何调取默认回调参数

最新推荐文章于 2024-01-25 10:27:57 发布
最新推荐文章于 2024-01-25 10:27:57 发布
阅读量2.3w 收藏 9
点赞数 2
分类专栏： JS 文章标签： 回调函数 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ltf_1225/article/details/80397197
版权

今天在用vue+element写代码的时候，碰到一个需求。

<el-dropdown trigger="click" @command="handleCommand" @visible-change="aa"></el-dropdown>
其中

方法中直接打印值，得到的是true或者false.

但是我需要传递两个值进去


a,b都有值，但是val是undefined.


调查了N久之后找到了方法

@visible-change="aa(a,b,$event)"
这样传值就正确了。

 
 

原因分析：
 

1.不写实参的aa默认传event 
 

2.aa()≈aa(someVar)，都属于写了实参的，就会传实参给函数，event就不见了。
 

所以补充事件以外的参数需要自己写上$event
 


 

解决方法来源：
 

Vue的@click="doXX" 和 @click = "doXX()"有什么区别？ - 知乎https://www.zhihu.com/question/49533859
 


 

感谢！！侵删

                

        

        

    




    

      

        

            

              
                
                  前端开发终生学习者
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    9
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  5
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
在vue中使用回调函数,this调用无效的解决

				
			

			

				

					11-19
				

			

		

		

			
				
//updateStudentInfoToServer是一个将本身部分数据异步上传的接口，接收三个参数，其中第一个是数据，第二、三个是函数，第二、三个函数使用function(){}形式书写  updateStudentInfoToServer:function(data, ...

			
		

	



                

              
                



	

		

			

				
					
Vue - elementUI 下拉菜单dropdown组件中command方法添加额外参数

				
			

			

				

					FellAsleep的博客
				

				

					03-15
					
					5204
					
				

			

		

		

			
				
在使用dropdown组件的时候，需要的参数可能很多，不仅仅是command一个参数。这就需要通过composeValue构造一个结构了。


<el-dropdown @command="handleCommand">

<el-dropdown-menu slot="dropdown">

<template v-for="item in items">

     <el-dropdown-item v-for="it in item " :command..

			
		

	



                


  
              

                


	

		

			

				
					
element-ui二次封装(下拉菜单el-dropdown)

				
			

			

				

					gongliming_qd的博客
				

				

					01-08
					
					1695
					
				

			

		

		

			
				
样式效果
效果1

效果2

效果一组件调用
<template>
  <div>
    <div v-for="item in tableArr" :key="item">
      <Dropdown
        :propObj="item" 
        @change="menuChange"
        :selectData="menuSelect.menuSelectData"
        :buttonIcon="menuSel

			
		

	





	

		

			

				
					
vue callback的使用

					
最新发布

				
			

			

				

					m0_61454228的博客
				

				

					01-25
					
					601
					
				

			

		

		

			
				
callback是一种特殊的函数，这个作为一个特殊的函数给其他函数调用，即回调函数。callback并不是一个关键字，只是约定俗称把他当作回调函数的参数单词。

			
		

	



		

			
		



	

		

			

				
					
elementUI 事件添加自定义参数，以及子组件emit传参 父组件增加自定义参数

				
			

			

				

					Web_Notes的博客
				

				

					09-26
					
					1696
					
				

			

		

		

			
				
@visible-change="val => dropDownOpen(val, 自定义参数) ，val为事件默认返回的参数
<el-dropdown size="small" trigger="hover" @visible-change="val => dropDownOpen(val, index)">




			
		

	





	

		

			

				
					
关于element-ui 下拉框select 编辑弹窗打开时 触发change事件解决方法思路

				
			

			

				

					monkey7
				

				

					10-09
					
					6575
					
				

			

		

		

			
				
change是下拉框值变换时就触发 由于编辑是从无到有的过程 所以他默认为 证件类型 被修改了 继而清空idnum 证件号码
解决方法有两个
1: 给falg标识 默认为0 第一次打开是 flag = 0 不执行 change过后flge++ 提交按钮flag=0
2: 阅读官方文档发现 el-select 有个叫visible-change的事件是 根据下拉框打开关闭触发的
此函数里面传递两个参数（第一个为回调参数， 第二个为自定义的参数）
例如报送项目中 日期类型 visible-change($eve

			
		

	





	

		

			

				
					
【Vue】如何给自带默认回调参数的函数添加自定义参数：$event

				
			

			

				

					GIS小虫的博客
				

				

					01-05
					
					1057
					
				

			

		

		

			
				
rt

			
		

	





	

		

			

				
					
Vue 级联组件添加按钮并添加点击事件加传参

				
			

			

				

					weixin_65084919的博客
				

				

					05-20
					
					981
					
				

			

		

		

			
				
我这里采用的是jq+vue实现的此功能，首先是要把按钮追加进去，当然头开始写真实dom会导致页面上也追加显示，但是我想实现的是在级联组件上追加所以，选择创建虚拟dom，然后传参这点实在是研究试错了半天，最后选择使用级联组件的visible-change 事件，应为他有两个回调函数，在展开时返回true，然后讲需要的传参都先递交给他，然后等到关闭弹窗时再去执行一遍，创建虚拟dom要不然会导致事件出现循环，创建虚拟dom的时候就做了数量判断，如果有就清除。

			
		

	





	

		

			

				
					
elementUI 下拉框隐藏时触发相关事件（下拉框下拉显示时不触发）

				
			

			

				

					weixin_30291791的博客
				

				

					07-15
					
					5837
					
				

			

		

		

			
				
原文：https://blog.csdn.net/CarryBest/article/details/79959389
今天做项目时，用elementUI框架，需要下拉框隐藏时出发某个函数，用了visible-change这个函数，发现点击时会触发两次我自己定义的函数，看了下官网的解释 ：下拉框出现/隐藏时触发 如果只想在下拉框隐藏时触发该怎么做呢?下面是解决办法：官网定义：Select E...

			
		

	





	

		

			

				
					
vue加载完成后的回调函数方法

				
			

			

				

					10-18
				

			

		

		

			
				
今天小编就为大家分享一篇vue加载完成后的回调函数方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
vue2.0$nextTick监听数据渲染完成之后的回调函数方法

				
			

			

				

					01-19
				

			

		

		

			
				
vue里面本身带有两个回调函数： 一个是`Vue.nextTick(callback)`，当数据发生变化，更新后执行回调。 另一个是`Vue.$nextTick(callback)`，当dom发生变化，更新后执行的回调。 栗子：   ...   <li v-for=item>{{item...

			
		

	





	

		

			

				
					
element-ui中select的change方法如何传多个参数

				
			

			

				

					weixin_51052779的博客
				

				

					02-22
					
					6270
					
				

			

		

		

			
				
在element-ui的select选中下拉，除了想把当前选中的值，change方法还想传入其他参数时，发现传值接收不到

方法一：

@change="(name)=>{ handleChange(name,id)}"

name：当前选中的值

id：需要传入其他的参数

方法二：

@change="handleChange($event,id)}"

$event：当前选中的值

id：需要传入其他的参数
...

			
		

	





	

		

			

				
					
antd-popover样式更改，及参数详解

				
			

			

				

					weixin_40532650的博客
				

				

					02-25
					
					1万+
					
				

			

		

		

			
				
overlayClassName=>popover 识别参数


 <Popover
     overlayClassName={ styles.ant_popover }//样式类
     title={111}//标题
     content={222}//内容
     trigger='click'//触发方式-hover-focus
     visible={show}//手动显示
     placement="topLeft"//相对页面内容，popover位置变化-共有.

			
		

	





	

		

			

				
					
Vue中函数有回调参数，添加参数时如何调取默认回调参数

				
			

			

				

					gcf10080353的博客
				

				

					07-14
					
					327
					
				

			

		

		

			
				
添加参数时如何调取默认回调参数

			
		

	





	

		

			

				
					
ElementUI el-dropdown 如何实现下拉框出现“触发元素”样式修改

				
			

			

				

					Yang_Xingxing_的博客
				

				

					04-13
					
					3199
					
				

			

		

		

			
				
el-dropdown 改变触发元素样式

			
		

	





	

		

			

				
					
vue中常用的数组方法

				
			

			

				

					真真的博客
				

				

					07-28
					
					3908
					
				

			

		

		

			
				
Vue中常用的数组方法
.filter()、.map()、.forEach()、.find()、.findIndex()、.some()、.every()
.filter()
.map()
.forEach()
.find()
.findIndex()
.some()
.every()


.filter()
	filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
	是否改变原数组：否
	是否对空数组进行检测：否
	
	语法：
	const arr= [32, 33

			
		

	





	

		

			

				
					
聊一聊Vue中的回调函数

					
热门推荐

				
			

			

				

					weixin_34250709的博客
				

				

					06-10
					
					1万+
					
				

			

		

		

			
				
回调函数 ? 那不是UI框架才用的吗？有句话怎么讲来着，书到用时方恨少。平常我们撸Vue，感觉即使用props封装组件。。也很少自己制作回调这种看起来高大上的东西.......但是实际开发中封装组件并不是这样的。许多组件需要子父组件进行通信让我们举个栗子：产品经理有个需求，需要让你做一个优惠券列表。然后需要把优惠券列表封装成组件。在下单支付时，调用优惠券列表。然后选择其中一个，在父组件里获取选择的...

			
		

	





	

		

			

				
					
Vue函数有回调参数，添加参数时如何保留默认回调参数

				
			

			

				

					YOOSHIN的博客
				

				

					12-15
					
					959
					
				

			

		

		

			
				
前端在用iview组件，但是他有默认传参，如果带上自己想一起带到方法的参数

  <Switch v-model="switch1" @on-change="change" />

如果直接使用@on-change="change"这个所指向的方法 那么就会返回默认传参 true | false
但是我需要传递别的值进去
可以使用$event来表示默认参数，写法是

  &...

			
		

	





	

		

			

				
					
vue3 element-plus @visible-change默认触发两次事件的解决方法

				
			

			

				

					H_Dsheng的博客
				

				

					07-16
					
					7713
					
				

			

		

		

			
				
解决@visible-change默认触发两次事件发送两次请求的问题

			
		

	





	

		

			

				
					
Vue中怎么使用回调函数

				
			

			

				

					05-20
				

			

		

		

			
				
在Vue中使用回调函数的方式有很多种，这里我提供一种常见的方式。首先，在组件中定义一个函数，该函数接收一个回调函数作为参数：

```
methods: {
  doSomething(callback) {
    // 这里是处理逻辑
    // 处理完后调用回调函数
    callback();
  }
}
```

然后，在模板中调用该函数时，将回调函数作为参数传入：

```
<template>
  <div>
    <button @click="doSomething(handleCallback)">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    doSomething(callback) {
      // 这里是处理逻辑
      // 处理完后调用回调函数
      callback();
    },
    handleCallback() {
      console.log('回调函数被调用了！');
    }
  }
}
</script>
```

这样，当用户点击按钮时，会执行 `doSomething` 方法并将 `handleCallback` 函数作为参数传入，当 `doSomething` 方法处理完逻辑后，会自动调用传入的回调函数 `handleCallback`。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 5

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值