Vue绑定自定义事件的注意事项

最新推荐文章于 2022-11-01 09:51:51 发布
最新推荐文章于 2022-11-01 09:51:51 发布
阅读量145 收藏
点赞数
分类专栏： Vue自定义组件 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qjw524/article/details/120157578
版权
本文探讨了在Vue中使用`this.$refs`绑定自定义事件时，`this`指向可能引发的问题。当直接在事件处理中使用普通函数，`this`将指向触发事件的组件而非Vue实例。解决方法包括将方法置于`methods`内或使用箭头函数，确保`this`正确指向Vue实例。理解这一机制对于优化组件间的交互至关重要。
摘要由CSDN通过智能技术生成

 当使用this.$refs绑定自定义事件时 如果不采用调用methods里的方法而是直接采用普通函数的话

如下图

此时的this则是触发自定义事件的组件而不是Vue实例  想要解决这个问题可以把方法写在methods中让Vue实例来管理或者采用箭头函数的形式（箭头函数会通过向上查找到Vue实例） 

Qjw524
关注
专栏目录
vue自定义事件注意事项
weixin_43524562的博客
04-25 74
vue自定义事件注意事项 自定义事件中，若你使用一个像 webpack 这样的构建系统，那么this.$emit(‘myEvent’)是可以被父组件v-on监听到的；否则推荐你始终使用 kebab-case 的事件名，具体原因请点击自定义事件查看 一、用webpack 这样的构建系统如下 父组件 <template> <div id="app"> <HelloWorld :msg="msg" @changeMsg="changeMsg" /> </d
Vue框架——事件绑定
cmy_top的博客
02-10 2874
事件绑定Vue如何处理事件事件函数的调用方式函数参数参数传递事件绑定-参数传递总结事件修饰符按键修饰符自定义按键修饰符 Vue如何处理事件 v-on指令用法 <div><button v-on:click='number++'>按钮</button></div> v-on简写形式 <div><button @click='number++'>按钮</button></div> 事件函数的调用方式
Vue中自定义事件
m0_59345890的博客
09-06 942
事件我们并不陌生，以前我们都是用的框架帮我们配置好的事件，我们称为原生事件。通过v-on:或者@绑定事件，事件触发时执行对应的程序。今天我们自己来创建一个事件，我们要先知道事件的三要素：事件源 target 、事件类型type 、监听器handler在自定义事件中，事件源就是我们设置的组件，事件类型我们自己命名，监听器就是事件绑定的那个函数，我们想要完成一个组件的完成，我们需要在组件中用到vm对象原型上的一个方法：this.$emit("事件类型名","要给触发的事件的函数handler传入值(可省)")我
Vue的绑定和使用this使用的一些注意事项
最新发布
q2269934630的博客
11-01 837
Vue的绑定和使用this使用的一些注意事项
【Vue组件自定义事件详解】
小田是个程序员的博客欢迎你的到来呀~
04-06 5047
本篇文章介绍了组件自定义事件的原理以及使用的方法，在实际开发中，组件的自定义事件也是一个小技巧，能有效提高开发的效率
vue中的自定义事件 和v-model
weixin_58379637的博客
07-09 751
vue中的自定义事件注意事项，v-model原理，sync修饰符
Vue自定义弹窗指令的实现代码
10-18
### 注意事项 在实际开发中，弹窗的样式和行为可能会更加复杂，包括但不限于响应式设计、动画效果、事件监听等。在使用自定义指令时，应该考虑这些额外的需求，确保功能的完整性与用户体验的一致性。 以上是关于...
vue项目中自定义video视频控制条的实现代码
10-15
在Vue项目中，自定义video视频控制条是一个常见的需求，以提供...以上就是实现Vue项目中自定义video视频控制条的基本步骤和注意事项。通过这样的自定义，不仅可以提供更丰富的交互体验，还能更好地符合产品的设计需求。
Vue组件—自定义事件
bubu212的博客
12-04 319
Vue组件 自定义组件 Vue框架 Vue查缺补漏
Vue组件绑定自定义事件
weixin_33955681的博客
06-22 741
Vue组件使用v-on绑定自定义事件： 　　可以分为3步理解： 　　　　1.在组件模板中按照正常事件机制绑定事件： 　　　　　　template: '<button v-on:click="increment">{{ counter }}</button>', 　　　　　　如上，v-on:click就是用来给子组件绑定点击事件的，这...
vue的组件一些注意事项(props, 自定义事件)
ZHXT__的博客
10-28 687
vue 的核心,就是一个一个的组件; 对于组件在使用上还是有一些需要的注意的东西的 使用Vue.component(" ",{})这样注册的组件为全局注册组件; Props的使用, 大小写的问题 对于传递一个对象的所有属性, 可以只使用v-bind=" " 对于自定义事件, 禁止使用驼峰命名; 使用中划线即可 对于自定义事件, 如果需要将原生的事件绑定到组件上时, 需要添...
61Vue - 自定义事件（使用 v-on 绑定自定义事件）
阿甘兄
07-29 751
我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！ 使用 v-on 绑定自定义事件 每个 Vue 实例都实现了事件接口(Events interface)，即： 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运...
vue2.0中v-on绑定自定义事件
WhaleHumpback
02-28 6764
vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定。每个 Vue 实例都实现了事件接口，即：使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。html代码注册组件创建Vue实例这个例子是一个极简版的购物车合计，商品数量只要增加就合计一...
Vue-组件自定义事件-绑定-解绑
qq_67801847的博客
08-12 1472
第一种：通过函数式，在夫中给子标签传入一个函数式，并在父的methods中创建，然后在子函数中接受，并再创建methods在子中调用。在app.vue给子标签绑定事件（v-on:自定义名称）,然后在子组件中通过函数调用。：this.$off(【】) (适用于解绑多个) / this.$off() 所有全部解绑。this.refs.组件名称.$on('自定义事件',回调函数)第三种：通过ref属性绑定，然后在钩子函数中调用(更加灵活)this.$off('自定义名称')...
Vue之组件自定义事件的绑定和解绑
可爱不能当饭吃
12-09 2733
不知道小伙伴们还记不记得在用 Vue 构建 TodoList 案例的博客中，我们有涉及到要从子组件中把数据传递给父组件，当时我用的方法是，让父组件给子组件传递一个函数，然后子组件把要传过来的数据放在那个函数中，这样父组件就可以拿到数据了。当然方法不止这一种，这不，博主又学到新方法了，迫不及待给你们分享。 一种组件间通信的方式，适用于：子组件 ===> 父组件 使用场景：A 是父组件，B 是子组件，B 想给 A 传数据，那么就要在 A 中给 B 绑定自定义事件（事件的回调在 A 中） 组件自定义事
Vue技术之绑定自定义事件
AtlantisPrincess的博客
07-05 428
Vue绑定自定义事件
Vue.js 组件中的v-on绑定自定义事件理解
热门推荐
读书就是赚钱
03-06 2万+
每个 Vue 实例都实现了事件接口(Events interface)，即：使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似，但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名。另外，父组件可以在使用子组件的地方直接用 v-
Vue组件自定义事件
super码力的博客
04-28 3161
自定义事件是给组件使用的，适用于子组件给父组件传递数据
vue中组件的自定义事件（详）
蜗牛~~
11-01 1万+
今天这篇文章，让你彻底学会组件自定义事件…… 我们在vue中用的click、keyup……等事件，这些属于内置事件，也就是js自带的事件。 问题一：什么是组件自定义事件呢？ 自定义事件，顾名思义就是自己打造的事件，包含事件名，事件回调等，定义好之后去给组件使用。而内置事件是给html元素用的，比如span、div等标签，不是组件。 也是一种组件间的通信方式，适用于子组件==>父组件。这里我们通过传值去讲述自定义事件如何使用。 问题二：如何实现子组件给父组件传值？ （1）复习一下props父
Vue自定义指令深度解析：实例演示与最佳实践
"vue自定义指令用法经典实例小结" 在Vue.js中，自定义指令是一种强大的功能，...自定义指令是Vue.js中增强用户界面交互的强大工具，通过理解并熟练运用上述写法和注意事项，开发者可以更好地扩展和定制Vue应用的行为。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值