Vue中自定义事件的$event传参问题

最新推荐文章于 2024-05-28 14:53:08 发布
最新推荐文章于 2024-05-28 14:53:08 发布
阅读量3.1k 收藏 6
点赞数 2
文章标签： Vue 自定义事件 父子组件 $event 参数传递
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PengHengYYDS/article/details/121348484
版权
1.$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。

2.在原生事件中，$event是事件对象，在自定义事件中，$event是传递过来的数据（参数）

如果遇到子组件向父组件传数据，需要用到自定义事件来处理，此时我们在父组件上监听那个自定义事件，并且需要接收子组件传过来的参数，同时我们自己还想传递一个参数给下面方法

 父组件

 

父组件监听自定义事件的定义的方法

 

此时上面的那个$event不再是原生的事件对象e，而是用来接收子组件传递过来的数据（参数）

彭恒0714
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习笔记202303学习笔记第四天-Vue3.0-事件传参和$event
qq_41632427的博客
04-06 171
前端
浅谈vue中$event理解和框架中在包含默认值外传参
10-14
主要介绍了浅谈vue中$event理解和框架中在包含默认值外传参，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE3 学习笔记（4）：VUE 事件处理、传参、事件修饰
最新发布
众纳百川的博客
05-28 700
常见的Web事件页面事件Onload --加载Onunload --取消Onscroll --滚动Onresize --大小改变表单事件Onsubmit --提交onchange --变更Onselect --选择Onreset --重置焦点事件Onfocus --得到焦点Onblur --失去焦点鼠标事件Onclick --点击Ondbclick --双击onmouseup --松开Onmousemove --移动Onmouseover --停留。
Vue中传递event
weixin_43977647的博客
04-02 3764
Vue中传递event 在html中的代码如下 <li class="circle" listId="0" @click="listChoose($event)"></li> 在javascript中的代码如下 listChoose: function (event) { this.photoPosition = $(event.target).at...
HTML使用vue的 event,vue怎么传event参数
weixin_29133985的博客
06-24 879
大家好，今天给大家分享的是vue怎么传event参数，我们都知道在vue中执行函数的时候我们可以这样写我们只要在html标签上面加上v-on:click="liebiao"这个是我们点击这个btn的话会执行liebiao函数，当然这个是没有传递参数的，如果我们想要传递参数过去咋办呢？我们可以这样写v-on:click="liebiao('myname')"这样的话我们就传递了一个 myname ...
(干货)vue 事件参数$event
08-17 3173
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件简写和事件对象$event</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> window.onload = functi.
Vue如何在方法中传递参数和Event?
weixin_49035434的博客
09-06 385
有时我们需要在内联事件处理器中访问原生 DOM 事件。你可以向该处理器方法传入一个特殊的。
vue-自定义组件传值的实例讲解
10-18
总结总结在 Vue 中，自定义组件的传值主要依赖于 prop 和事件。父组件通过 prop 向子组件传递数据，子组件通过事件向父组件发送消息。对于需要双向数据绑定的情况，Vue 提供了 .sync 修饰符和 v-model 语法糖，简化...
Vue传参一箩筐(页面、组件)
10-17
4. **自定义事件（Event Bus）**： - 当两个没有直接关系的组件需要通信时，可以使用一个全局事件总线。创建一个单独的Vue实例作为事件中心，组件A触发事件并附带数据，组件B监听这个事件并接收数据。 5. **Vuex...
vue slot与传参实例代码讲解
11-28
本文将深入讲解Vue中的插槽及其传参功能。 ### 默认插槽（Default Slot） 默认插槽是最基础的插槽类型，用于向子组件注入内容。在父组件中，我们可以直接在子组件标签内放入需要展示的内容，这部分内容将会被替换...
vue中 用事件对象$event 添加属性_解读Vue3中废弃组件事件的$on，$off 和 $once 实例方法...
weixin_29745227的博客
01-31 3227
本文要讲解的内容原文档地址点我传送Vue3.0中事件API$on，$off 和 $once 实例方法已被移除，应用实例不再实现事件触发接口。接下来我们分析下为什么要在Vue3中去掉，如果需要继续使用此功能改为使用第三方 mitt 库替代。2.x语法在 2.x 中，Vue 实例可用于触发通过事件触发 API 强制附加的处理程序 ($on，$off 和 $once)，这用于创建 event hub，以...
vue中传入event参数
GHY
10-23 1371
括号内写入 $event 即可 <!DOCTYPE html> <html lang="ch-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="shortcut icon" href="" type=""> </head> <body> <div id="app">
Vue中如何绑定事件 传递参数
xiaowude_boke的博客
02-23 1264
vue绑定事件 v-on
Vue 如何在事件中将 Event 传入
weixin_41374628的博客
03-25 657
有时候在开发时，除了需要的参数，还需要将事件传入 <div v-for="(item,index) in list" @click="goDetail($event,item)"> goDetail(e, item){ // e 就是事件 }
vue3学习2：vue 的指令v-on，event
weixin_43788986的博客
07-08 1851
作用：如果我们想监听用户的点击, 拖拽, 键盘事件等, 可以使用v-on指令，v-on就是用于绑定事件的，通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明。 简写：@举个栗子 v-on 指令所绑定的事件处理函数中，可以接收到事件对象 event。 event是vue提供的特殊变量，用来表示原生的事件参数对象event。event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。event是vue提供的特殊变量，用来表示原生的事件参数对象event。event
vue3基础_$event、ref、fragment和teleport
weixin_50755029的博客
04-15 1607
传送，能将特定的 html 结构（一般是嵌套很深的）移动到指定的位置，解决 html 结构嵌套过深照成的样式影响或不好控制的问题。7.在App.vue 的 parent上面加点击事件，相当于直接在parent.vue 的根组件加点击事件。vue3组件可以没有根标签，其内部会将多个标签包含在一个 fragment 虚拟元素中。// 明确告诉它是自定义的，那handleClick的点击就不会生效。减少内存占用以及不必要的层级嵌套。
事件处理程序中event参数的传递
weixin_34117211的博客
10-31 1783
问题 今天突然要维护一个老古董的项目，里面大部分都是原生js和jquery，用vue之类多了，这些都有些生疏... 代码中有一个HTML事件处理程序，<button onclick="clickHandler(e)">屠龙宝刀点击就送</button> function clickHandler(e) { co...
vue中的$event
duansamve的博客
10-13 3398
一、表示事件对象： <input :value="message" @input="message=$event.target.value"> let app = new Vue({ el: "#app", data: { message: '初始值' } }) 二、在子父组件通信时接收子组件抛出的值： 子组件模板内容： <b...
vue组件间通信之兄弟组件通信（$EventBus）
qq_26905813的博客
09-17 2371
vue组件间通信之兄弟组件通信（$EventBus）
vue2 $emit 传参
06-01
在 Vue2 中，使用 `$emit` 传参可以通过在 `$emit` 方法的第二个参数中传递一个对象，该对象就是要传递的参数。例如： ``` // 父组件中 <template> <child-component @custom-event="handleCustomEvent"></child-component> </template> <script> export default { methods: { handleCustomEvent(data) { console.log(data) } } } </script> // 子组件中 <template> <button @click="handleClick">点击触发自定义事件</button> </template> <script> export default { methods: { handleClick() { this.$emit('custom-event', { name: '张三', age: 18 }) } } } </script> ``` 在子组件中，通过 `this.$emit('custom-event', { name: '张三', age: 18 })` 触发自定义事件，并传递了一个对象 `{ name: '张三', age: 18 }` 作为参数。在父组件中通过 `@custom-event="handleCustomEvent"` 监听自定义事件，当自定义事件被触发时，会执行 `handleCustomEvent` 方法，并打印出传递的参数对象 `{ name: '张三', age: 18 }`。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值