Vue如何给组件绑定原生事件

最新推荐文章于 2024-05-06 22:08:04 发布
最新推荐文章于 2024-05-06 22:08:04 发布
阅读量562 收藏
点赞数
分类专栏： 前端
原文链接：https://blog.csdn.net/weixin_34204722/article/details/91448271
版权

由于组件上面的事件默认为自定义事件，那么此例中<child @click="handleClick"></child>不会被系统识别为我们理解中的点击事件必须通过$emit方法绑定它才行。

这样组件内外都要定义方法未免有点麻烦，那么想在组件上直接使用原生事件怎么办？给事件加个后缀.native就行：

显然，我们推荐第二种方法，代码少了不是一行两行啊～

H-L
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-给组件绑定原生事件
weixin_45497246的博客
05-13 1905
当我给一个组件绑定一个事件的时候，实际上这个事件绑定的是自定义的事件，也就是你真正的鼠标点击触发的事件，并不是我绑定的click事件。 所以在下面这个例子里，点击子组件，并不会有弹窗提示。 如果想触发自定义的click事件，就得在子组件里对元素进行事件绑定，这个事件才是真正的原生事件。 在元素上绑定的事件，监听的是原生事件 在组件上绑定的事件，监听的是自定义事件，需要用this.$emit()来触发。 也就是酱婶的： 在开发的过程中这样写有点太麻烦，假如我有这样的需求，我就想在子组件上监听原生的事件
vue学习笔记之给组件绑定原生事件操作示例
10-15
总的来说，Vue组件绑定原生事件的关键在于理解Vue的事件系统和如何利用`native`修饰符。通过`@click.native`，我们能够在保持组件封装的同时，方便地处理DOM级别的事件。这在开发过程中能提高代码的可读性和效率，...
Vue 如何给组件绑定原生事件
weixin_34204722的博客
04-05 851
由于组件上面的事件默认为自定义事件，那么此例中<child @click="handleClick"></child>不会被系统识别为我们理解中的点击事件必须通过$emit方法绑定它才行。 <body> <div id="root"> <child @click="handleClick"></child&g...
vue 组件绑定自定义事件
最新发布
libingjiedd的博客
05-06 370
在，子组件中，我们是可以 给 button 绑定 click 事件的，因为 原生button 标签，本来就有 click 事件，这里只是巧妙利用了，子传父的一个思想，用 $emit 暴露出去一个自定义事件，父监听，，子组件触发了点击事件，同时，父也会监听到。在vue 项目开发中，常常为了，节省代码、高效利用，会封装自定义组件，封装自定义组件，传值就是 prop ，那绑定事件呢？假设，前提：d-button 没有绑定事件，父组件是这样写的，你点把，把 button 按钮，点 烂，都不会 有输出结果。
Vue 中给组件绑定原生事件
weixin_33804582的博客
02-11 184
绑定原生事件 &lt;div id="root"&gt; &lt;child @click="handleClick"&gt;&lt;/child&gt; &lt;/div&gt; Vue.component('child',{ template:'&lt;div @click="handleChildClick"&gt;...
Vue 给组件绑定原生事件
purple_lumpy的博客
10-14 696
给一个组件绑定原生事件，如下方法是错误的！ &lt;div id="root"&gt; &lt;child @click="handleClick"&gt;&lt;/child&gt; &lt;/div&gt; &lt;script&gt; Vue.component("child",{ template: "&lt;div&a
Vue_给组件绑定原生事件
大脸猫~
06-29 1297
当我们使用组件的时候，想点击组件触发事件，要在子组件里定义触发事件，在父组件定义是没用的. 只有从子组件往外触发自定义事件，父组件里定义的触发函数才有用。 那么怎么样才能直接在父组件上定义触发函数，不需要经过子组件呢？ 在触发事件上加上.native eg： &amp;lt;counter @click.native=&quot;handerClick&quot;&amp;gt;&amp;lt;/counter&amp;gt; hand...
浅谈vue中组件绑定事件时是否加.native
10-16
总的来说，Vue组件绑定事件时是否需要添加`.native`取决于我们是要监听原生DOM事件还是自定义组件的事件。对于原生元素，不需要`.native`；而对于自定义组件，如果需要监听其内部的DOM事件，则必须加上`.native`。...
vue绑定事件后获取绑定事件中的this方法
10-18
在Vue组件的方法中，`this`通常指向调用该方法的 Vue 实例。例如，在事件处理函数中，`this`将指向触发事件的Vue实例。 在事件处理中，有时我们需要获取触发事件的元素，这可以通过`$event`来实现。`$event`是Vue在...
解决vue组件中click事件失效的问题
12-13
本文将详细解析如何解决Vue组件中click事件失效的问题，以及涉及到的Vuex中未知mutation类型的错误。 首先，让我们深入理解Vue中的事件绑定。Vue提供了多种方式来绑定事件，例如`v-on:click`、`@click`和`@click....
Vue将原生事件绑定到组件
weixin_45857749的博客
09-24 298
阅读vue文档时发现这个原生事件绑定到组件的地方不太懂，阅读了下资料总结如下： 引子： 当我们定义了一个子组件son（里面写了个按钮button），在父组件father中引用了，然后我们想在上面绑定click事件，触发handleClick回调。 但click并没触发。 原因： 因为vue有自己事件运行机制，子组件son不是原生DOM元素，我们是无法直接给其绑定原生事件并触发的。 解决方法： 使用native修饰符 使用$emit分发事件 使用$listeners 一： 仅需要在click事件后加上.n
给组件绑定原生事件加native修饰符（Vue）
Twinkle的博客
07-18 788
&lt;body&gt;     &lt;div id="root"&gt;         &lt;child @click.native="handleClick"&gt;&lt;/child&gt;     &lt;/div&gt;     &lt;script&gt;         Vue.component("child",{       
VUE在组件的引用页面给组件添加事件
xk_initial的博客
09-06 1711
VUE在组件的引用页面给组件添加事件 当我们在某个页面应用引用组件的时候，想要给这个引入的组件添加一些事件，像这样 <cardinfo @click="goodclick" /> 但是这样可能是无效的，因为这个事件是引用组件页面的事件，而不是组件本身的事件，所以组件内不能识别这个事件的来源。 在@click后面加native表示的是当前页面的事件 <cardinfo @click.native="goodclick" />
vue将方法挂载到原型上
weixin_52941842的博客
05-07 4421
有时我们在做项目的时候某个方法或某些方法需要重复时候，这个时候我们可以将他挂载到原型上，然后直接this.方法，使用 首先在main.js写入以下代码 //feedback 是我封装的一个对象，里面主要是uniapp消息反馈的api二次封装，由于多个页面需要使用这里我将它封装成一个对象然后挂到原型上以便于使用 const feedback = require('./public/public.js')//引入封装好的反馈方法 Vue.prototype.$feedback = feedback//
组件绑定事件与源生事件
qq_38402659的博客
02-24 220
在组件上绑定的事件, 分为两种,一种是监听事件,只能由组件内通过$emit()触发, 另一种,是原生事件,触发在父元素中的方法 想在组件上触发原生事件需要在事件后加.native &lt;div id="app"&gt; &lt;item @click="handleClick"&gt;&lt;item&gt; &lt;item @click.native="handleCli...
2022前端面试题
xiaodebufuyan的博客
05-31 3908
React.js 面试真题 ★★★ React 事件绑定原理 /* 一、react并没有使用原生的浏览器事件，而是在基于Virtual DOM的基础上实现了合成事件，采用小驼峰命名法，默认的事件传播方式是冒泡，如果想改为捕获的话，直接在事件名后面加上Capture即可；事件对象event也不是原生事件对象，而是合成对象，但通过nativeEvent属性可以访问原生事件对象； 二、react合成事件主要分为以下三个过程： 1、事件注册 在该阶段主要做了两件事：document上注册、存储事件回调。所有事件都会
react事件与原生事件的区别
fangqi20170515的博客
09-05 610
react的事件对象是合成的，不是原生的；
16.Vue - 组件自定义事件、子-＞父组件通信
weixin_51351637的博客
09-12 2615
组件间通信①第一种方式，在父组件中: 或②第二种方式，在父组件中:③若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第一种写法：使用@或v-on) -->
vue2中获取DOM绑定原生js键盘事件
07-14
在Vue2中，你可以通过使用`ref`来获取DOM元素的引用，并使用原生的JavaScript来绑定键盘事件。以下是一个示例： ```html export default { mounted() { this.$refs.inputRef.addEventListener('keyup',...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值