vue 自定义事件 绑定事件的回调可以是匿名函数

已于 2024-01-08 15:05:03 修改
阅读量404 收藏 9
点赞数 9
文章标签： vue.js 前端 javascript
于 2024-01-08 14:56:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44429641/article/details/135457299
版权

有时候给组件绑自定义事件的时候，回调的逻辑比较简单，只是子组件通知父组件要更新一下页面数据，但是又不想多写一个method，可以使用箭头函数(或者匿名函数)实现简单的逻辑

<!--SpuForm是子组件,给子组件绑定一个名为getSpuInfo的事件,其回调可以是匿名函数-->
<SpuForm 
    v-show="scene==1" 
    :changeScene.sync="scene" 
    ref="spu"
    @getSpuInfo="()=>{getSpuList()}" 
/>
<!--getSpuList是methods里的方法-->
madlife12327
关注
Vue教程-自定义指令方法
hjw15910531612的博客
09-14 585
Vue自定义指令方法
Vue 组件中5种Watch方式的使用 # 侦听 / 回调函数 / 对象属性监听
ljinest
09-10 3596
Vue 组件中5种Watch方式的使用 解释 watch是一个对象，这个对象的键是需要观察的表达式，值可以是直接方法、方法名、包含选项的对象等等，Vue实例会在实例化时调用$watch(), 遍历watch对象的每一个属性，并且观察。 注意，本文不会阐述watch对象的具体实现源码，只是介绍watch对象键值的五种使用方式。 格式： watch { { [key: string]: string | Function | Object | Array } } 使用方式： 最直接的，直接用方法作
VUE绑定事件方法
AI_GG的博客
12-17 541
下面是比较详细的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
d3.js学习笔记vue2（4）匿名函数
silent_missile的博客
12-05 700
d3为了灵活，在很多地方需要使用匿名函数，比如设定属性时 curvesClass.node.selectAll('path') .data(points) .enter() .append('path') .attr('d', (d) =&gt; curvesClass.lineGenerator(d)) // 匿名函数 ...
Vue中 匿名函数直接执行$forceUpdate()更新.
走错路的程序员
11-09 1081
vue中, 表格行, 需要实现当商品信息被选择的时候, 同时把商品的其它信息也写入到订单数据的其它几个字段中. <template v-for="(record,index) in DataSource"> <tr > <td> <a-select v-model="record.SKU" placeholder="商品编码(SKU)" @change="(value,e) => {
Vue3 emits 结合回调函数的使用
最新发布
PinkCoder
01-24 1365
vue中如何使用回调函数，emits如何结合回调函数让父子组件通信
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
10-14
1. 将普通函数替换为箭头函数，这样可以保证回调函数内的this正确指向Vue实例。 2. 如果已经在箭头函数中定义了方法，那么可以放心地使用this来访问Vue实例的其他属性和方法。 3. 了解普通函数和箭头函数在创建和...
解决vue 给window添加和移除resize事件遇到的坑
11-20
在最初的方法中，我们在`mounted`生命周期钩子中添加了一个匿名函数作为`resize`事件的回调： ```javascript mounted() { window.addEventListener('resize', () => { '改变窗口大小时需要做的处理' }); }, ...
vue源码分析-事件机制
yyzzabc123的博客
10-27 172
点击传递信息给父组件
vue 解决setTimeOut和setInterval函数无效报错的问题
10-15
在Vue项目中，如果直接使用传统的匿名函数形式，例如`function() {}`，可能会导致`this`的指向错误，从而引发问题。 问题在于，当在Vue组件的方法中使用`setTimeout`或`setInterval`时，由于函数内部的`this`不再...
vue加载完成后的回调函数方法
12-10
如下所示： var c = new Vue({ el: "#cartoon", data: data, mounted: { alert("vue加载完成"); } }); 以上这篇vue加载完成后的回调函数方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
Vue进阶 - 自定义事件
吾昂王
12-30 571
定义 一种组件间通信的方式，适用于：子组件 ===> 父组件 使用场景 A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中） 绑定 方式一：在父组件中<School @schoolName="getSchoolName" />或<School v-on:schoolName="getSchoolName" /> 方式二：在父组件中： <School ref="school" /> ...... mounted(
vue 回调函数（callback）的用法
恒二哥的博客
02-10 9130
这样结果是对的，但是改成这样并不完美，因为这么做就相当于将f()写死在writeFile()里了，如果此处我想根据不同的场景调用不同的函数还要写几个不同的writeFile()，而他们之间的区别仅仅是最后调用的那个函数不同，这里就体现callback的作用了（准确地说callback并不真的是Javascript里的关键字，只是大家都约定成俗把callback这个单词作为回调函数的默认选择)。callback 是一种特殊的函数，这个函数被作为参数传给另一个函数去调用，这样的函数就是回调函数。
Vue学习4 - 自定义指令、回调函数、箭头函数
weixin_39651356的博客
04-26 1813
文章目录1. 自定义指令2. 过滤器3. 回调函数中是普通函数、箭头函数this指向问题 1. 自定义指令 自定义指令时需要使用到钩子函数进行定义指令 钩子函数bind：只调用一次，进行初始化操作inserted：被绑定元素父节点插入时的调用updatecomponentUpdatedunbind：只调用一次，指令与元素解绑时 钩子函数的参数el：被绑的元素对象binding：被绑指令所传的值...
24 在Vue3中使用匿名函数
Python私教
12-20 1218
绑定匿名方法和绑定普通方法主要是写法上的区别，其他的区别并不是很大。就拿上一个案例来说，我们使用匿名函数可以很简单的重写。
vue 自定义指令中：addEventlistener监听事件函数传参，使用removeEventListener解绑
qq_38416502的博客
04-25 3701
上面我们在自定义指令的时候在mounted中对dom添加事件监听，在beforeUnmount中进行事件解绑，但是第二个参数是匿名函数，所以add和remove的函数不是同一个所以参数不一致，remove是无效的。一般在组件中使用addeventlistener添加事件监听的时候，在组件销毁的时候都要使用removeEventListener进行销毁，不然会造成内存泄漏。上面这样写确实可以消除掉绑定的事件，但是无法进行参数的传递无法再函数中使用el，biinding等参数。
vue中自定义事件回调函数传参
orq18810575870的博客
08-25 2万+
我们知道父子组件中，子组件一般是通过$emit(自定义事件名称，数据)的形式来将数据传给父组件 父组件通过回调函数处理子组件传过来的数据， 例如： 子组件内： this.$emit(change,data) 父组件内 &lt;json-editor @change="onSettingChange" &gt;&lt;/json-editor&gt; 我们都知道子组件会将数据自动作为...
vue加载完成后的回调函数
热门推荐
justinytsoft的博客
04-24 2万+
var c = new Vue({       el: "#cartoon",       data: data,       mounted: {           alert("vue加载完成");                       }                  });
vue 自定义事件传值和回调函数
07-28
在 Vue 中，可以使用自定义事件来传递值和回调函数。下面是一种常见的方式： 1. 定义一个子组件，可以使用 `this.$emit()` 触发自定义事件，并传递值或回调函数。 ```javascript // 子组件 点击触发事件 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值