给组件绑定原生事件

最新推荐文章于 2024-01-17 16:37:22 发布
原创 最新推荐文章于 2024-01-17 16:37:22 发布 · 647 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在前端开发中如何区分并正确使用自定义事件与原生事件。介绍了在组件内绑定自定义事件的方法及触发机制，并解释了如何通过添加native关键字监听原生事件。

先写一个事件绑定

这段代码点击Child是没有作用的

这是因为当我给一个组件绑定一个事件的时候，<child @click="handleClick"></child>，这个实际上绑定的是一个自定义的事件

当你鼠标点击的时候，触发的并不是这个click事件

当我点击的时候，就能够触发childclick事件

这是因为当我在div里面绑定事件<div @click="handleChildClick">Child</div>是原生的事件，在child里面绑定的事件

<child @click="handleClick"></child>是自定义事件

那么我现在想要触发这个自定义事件，需要在通过this.$emit来触发自定义事件

就有click出来了
执行逻辑是：首先当你点击了div元素的时候，div会监听<div @click="handleChildClick">Child</div>到自身被点击了，然后向外触发this.$emit('click');了一个自定义事件，然后在组件中<child @click="handleClick"></child>监听了这个自定义事件，那么这个自定义事件就会被执行

当然这样写太过麻烦：

我就想在child上监听原生事件，可不可以呢？可以的

@click.native="handleClick"在自定义事件后面添加一个native就会变成监听原生事件了

Vue给组件绑定原生事件(demo)
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
04-04 241
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>给组件绑定原生事件</title> <script src="./vue.js"></script> </head> <body> &lt...
23.VUE之组件（绑定原生事件、$listeners、$ref）
weixin_45492145的博客
10-28 356
目录 （1）组件绑定原生事件 （2）监听器属性listeners（3）listeners （3）listeners（3）ref与$refs注册引用信息属性和对象 组件绑定原生事件 有时，我们想要在一个组件的根元素上直接监听一个原生事件，一般操作步骤如下 1、首先定义一个 child 组件，什么事件都不绑定，代码如下： 步骤： 2、接下来，给 child 组件增加一个 @click 事件，如下所示...
组件内的事件绑定
djj5503的博客
04-24 423
#组件内的事件绑定 应用场景：点击DOM的button（触发一个事件 event），用来显示/隐藏的一个DOM元素 实现思路： 获取button的点击事件（click event） 编写事件处理方法 绑定事件 小结： 组件内的事件绑定是指： （1）DOM元素的事件 ，通常是button的click事件 ...
组件之间的事件绑定
djj5503的博客
04-30 216
#组件之间的事件绑定 应用场景：parent component内嵌了一个child component，child的template 有一个button，点击这个button，把child的数据传递给parent component 数据流向：从child -> parent 用到的知识点：output、EventEmitter（事件发射器） ...
vue学习笔记之给组件绑定原生事件操作示例
10-15
总的来说，Vue组件绑定原生事件的关键在于理解Vue的事件系统和如何利用`native`修饰符。通过`@click.native`，我们能够在保持组件封装的同时，方便地处理DOM级别的事件。这在开发过程中能提高代码的可读性和效率，...
给组件绑定原生事件以及事件修饰符native
Hiroshi's
01-10 259
上述代码点击页面的Child不会有任何输出，因为绑定的是自定义事件。想要有输出，需要这样做： <body> <div id="app"> <child @click="handleClick"></child> </div> <script> Vue.component('child', { template: '<div @click="com.
Vue2：给组件绑定自定义事件
Brave_heart4pzj的博客
01-17 1022
Vue
native - 监听组件根元素的原生事件， 主要是给自定义的组件添加原生事件
qq_42859450的博客
03-06 432
vue native修饰符
组件的自定义事件(绑定、解绑)
summer_cloudy的博客
11-07 651
组件的自定义事件(绑定、解绑)
16.Vue - 组件自定义事件、子-＞父组件通信
weixin_51351637的博客
09-12 2886
组件间通信①第一种方式，在父组件中: 或②第二种方式，在父组件中:③若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第一种写法：使用@或v-on) -->
原生点击事件和触发点击事件
u012497072的博客
05-21 1223
Hello World
Vue .native 将原生事件绑定到组件
352328759的博客
05-25 2397
详见vue官网 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
绑定点击事件及解绑点击事件
YY的博客
10-20 3383
绑定点击事件及解绑点击事件
html div单击事件,给div绑定点击事件三个方法
热门推荐
weixin_42393452的博客
06-05 1万+
基础代码测试div {font-size: 2em;width: 250px;cursor: pointer /*变成手型*/}.clickme {background-color: #2aabd2;}方法1-javascript代码绑定事件绑定-点击我document.getElementById("clickme").onclick = function () {location.href =...
绑定事件的三种方法
weixin_43750162的博客
07-28 699
绑定事件的三种方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div_01{ width:200px; height: 200px; ...
Vue 学习之 ---事件绑定
qq_33736036的博客
11-15 2097
Vue 事件绑定和事件修饰符
vue2，vue3自定义组件绑定原生事件，触发问题
最新发布
05-13
### Vue2 和 Vue3 中为自定义组件绑定原生事件的触发问题及解决方案 #### 一、Vue2 中的原生事件绑定行为 在 Vue2 中，当尝试在一个自定义组件上绑定原生 DOM 事件时，这些事件并不会自动传播到该组件的根元素。这是因为 Vue 默认认为这些事件是针对整个组件的行为而非其内部的具体 DOM 节点[^1]。 例如，假设有一个按钮组件 `<MyButton>`，在其外部绑定了一个点击事件： ```html <MyButton @click="handleClick"></MyButton> ``` 如果 `<MyButton>` 的模板是一个普通的 `<button>` 元素，则上述代码中的 `@click` 并不会生效，除非手动将其映射到根节点。 解决方法之一是在子组件中显式地使用 `$listeners` 或者直接绑定事件到根元素。例如： ```javascript // MyButton.vue <template> <button v-on="$listeners">点击我</button> </template> <script> export default { name: 'MyButton' }; </script> ``` 这样就可以让父级绑定的所有事件（包括原生事件）都传递到子组件的根元素上[^4]。 --- #### 二、Vue3 中的变化及其影响 Vue3 对事件系统的改进使得这种问题得到了更好的处理。在 Vue3 中，`.native` 修饰符已被移除，取而代之的是更清晰的机制——即通过 `v-on` 自动将事件绑定至组件的根节点。这意味着，在大多数情况下不再需要额外的操作即可完成原生事件的绑定。 然而需要注意的一点是，如果希望阻止某些特定事件冒泡或修改默认行为，可能仍需在子组件中进行一些配置。比如： ```javascript // MyButton.vue (Vue3) <template> <button @click.stop="internalHandler">点击我</button> </template> <script> import { defineComponent } from 'vue'; export default defineComponent({ name: 'MyButton', setup() { const internalHandler = () => console.log('Internal handler triggered'); return { internalHandler }; } }); </script> ``` 在此示例中，尽管父组件仍然可以监听 `@click`，但由于 `.stop` 阻断了冒泡链路，因此仅限于当前层面上捕获事件[^3]。 另外值得注意的是，对于非根级别的嵌套结构来说，依然有必要明确指出哪些部分应该接收相应的交互信号[^2]。 --- #### 三、总结对比表 | 功能/版本 | Vue2 | Vue3 | |-----------|------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------| | 默认行为 | 不会自动转发到根元素 | 自动应用到顶层 HTML 标记 | | 处理方式 | 使用 `$listeners` 或 `.native` 修改器 | 利用更新后的组合 API 及简化版侦听器 | | 移除特性 | 支持 `.native` | 已废弃 | --- ### 示例代码展示 以下是基于两个框架分别实现同样功能的例子： **Vue2** ```html <!-- ParentComponent.vue --> <template> <ChildComponent @click.native="onParentClick"></ChildComponent> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { onParentClick() { alert('Clicked!'); } } } </script> ``` **Vue3** ```html <!-- ParentComponent.vue --> <template> <ChildComponent @click="onParentClick"></ChildComponent> </template> <script> import { defineComponent } from 'vue'; import ChildComponent from './ChildComponent.vue'; export default defineComponent({ components: { ChildComponent }, setup() { const onParentClick = () => alert('Clicked!'); return { onParentClick }; } }) </script> ``` 两者之间的差异在于 Vue3 更加简洁明了，同时也减少了不必要的复杂度。 ---
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值