Vue_给组件绑定原生事件

最新推荐文章于 2024-08-24 14:30:21 发布
原创 最新推荐文章于 2024-08-24 14:30:21 发布 · 1.3k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何在不通过子组件的情况下直接在父组件中定义并触发事件的方法。通过使用.native修饰符，可以实现在父组件中直接定义事件处理函数。

当我们使用组件的时候，想点击组件触发事件，要在子组件里定义触发事件，在父组件定义是没用的.

只有从子组件往外触发自定义事件，父组件里定义的触发函数才有用。

那么怎么样才能直接在父组件上定义触发函数，不需要经过子组件呢？
在触发事件上加上.native
eg：

<counter @click.native="handerClick"></counter>
handerClick:function(){
    alert('click!')
 },

效果：
这里写图片描述

23.VUE之组件（绑定原生事件、$listeners、$ref）
weixin_45492145的博客
10-28 362
目录 （1）组件绑定原生事件 （2）监听器属性listeners（3）listeners （3）listeners（3）ref与$refs注册引用信息属性和对象 组件绑定原生事件 有时，我们想要在一个组件的根元素上直接监听一个原生事件，一般操作步骤如下 1、首先定义一个 child 组件，什么事件都不绑定，代码如下： 步骤： 2、接下来，给 child 组件增加一个 @click 事件，如下所示...
vue 组件绑定自定义事件
dd的博客
05-06 578
在，子组件中，我们是可以 给 button 绑定 click 事件的，因为 原生button 标签，本来就有 click 事件，这里只是巧妙利用了，子传父的一个思想，用 $emit 暴露出去一个自定义事件，父监听，，子组件触发了点击事件，同时，父也会监听到。在vue 项目开发中，常常为了，节省代码、高效利用，会封装自定义组件，封装自定义组件，传值就是 prop ，那绑定事件呢？假设，前提：d-button 没有绑定事件，父组件是这样写的，你点把，把 button 按钮，点 烂，都不会 有输出结果。
Vue 中给组件绑定原生事件
weixin_33804582的博客
02-11 251
绑定原生事件 &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 如何给组件绑定原生事件
weixin_34204722的博客
04-05 918
由于组件上面的事件默认为自定义事件，那么此例中<child @click="handleClick"></child>不会被系统识别为我们理解中的点击事件必须通过$emit方法绑定它才行。 <body> <div id="root"> <child @click="handleClick"></child&g...
Vue-给组件绑定原生事件
weixin_45497246的博客
05-13 1996
当我给一个组件绑定一个事件的时候，实际上这个事件绑定的是自定义的事件，也就是你真正的鼠标点击触发的事件，并不是我绑定的click事件。 所以在下面这个例子里，点击子组件，并不会有弹窗提示。 如果想触发自定义的click事件，就得在子组件里对元素进行事件绑定，这个事件才是真正的原生事件。 在元素上绑定的事件，监听的是原生事件 在组件上绑定的事件，监听的是自定义事件，需要用this.$emit()来触发。 也就是酱婶的： 在开发的过程中这样写有点太麻烦，假如我有这样的需求，我就想在子组件上监听原生的事件
vue组件原生事件以及路由
daruan1111的博客
07-25 450
1.组件 组件就是可以扩展HTML元素，封装可重用的HTML代码，可以将组件看作自定义的HTML元素 1.1组件注册 全局注册： 组件注册时，需要给他一个名字，如下： Vue.component('my-component-name', { /* ... */ }) # 组件名使用kebab-case (短横线分隔命名)定义时，引用这个元素时使用<my-com...
13 Vue 给组件绑定原生事件方法汇总和总结
野路子云遇见不同的自己
10-24 1635
13 Vue 给组件绑定原生事件方法汇总和总结
vue学习笔记之给组件绑定原生事件操作示例
10-15
总的来说，Vue组件绑定原生事件的关键在于理解Vue的事件系统和如何利用`native`修饰符。通过`@click.native`，我们能够在保持组件封装的同时，方便地处理DOM级别的事件。这在开发过程中能提高代码的可读性和效率，...
vue3_硅谷甄选_003_子组件通过自定义事件给父组件传递参数
浪漫韫秋
08-24 925
子组件给父组件传递数据。先写一个子组件，如上所示；父组件当中引入子组件；定义子组件样式这是子组件；父组件当中，给子组件绑定，自定义事件；在父亲组件当中，定义事件回调；通过组件实例的$emit方法触发自定义事件；vue3比较尴尬；不能通过组件实例的emit方法来触发；因为vue3当中setup这种写法是没有this的；也就是你拿不到组件实例；在儿子组件当中，触发事件；事件的回调函数当中，可以通过defineEmits方法触发自定义事件自定义事件，这就可以传递给父亲组件了；
vue中使用原生事件
zyx的博客
02-06 5682
在项目中用到element ui 这个ui框架，有些组件没有封装的事件，例如click事件 ，我在使用时感觉不起作用，后来查看vue官方文档，发现有些原生事件是不提供，还有我们自定义的组件也是不能直接使用click事件的 ，需要在click事件后写上.native才能生效 即 例如@click.native = "enter">
vue加原生事件
simple_T的博客
05-20 261
vue学习17：给组件绑定原生事件
simoon's的博客
05-07 2077
Vue.component('child', { template: `&lt;div&gt;Hello world&lt;/div&gt;` }) var app = new Vue({ el:'#app', methods: { handleClick() {...
vue绑定原生事件
归零
12-20 1002
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;vue不使用绑定原生事件&lt;/title&gt; &lt;script src="vue.js"&gt;&lt;/s
Vue 给组件绑定原生事件
purple_lumpy的博客
10-14 752
给一个组件绑定原生事件，如下方法是错误的！ &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的原生DOM事件、绑定组件、自定义事件
babywenever的博客
11-30 1435
如果加上 .native事件修饰符，就会变为原生事件，即便子组件中有$emit自定义事件操作，但是父组件中的事件仍旧会以“vue的原生事件”为优先，原生事件的优先级高于自定义事件。父组件中， 利用v-on进行事件的监听操作，可以不传递参数，也可以不加()，那么回调函数中的event就是默认的事件对象。@click.native 时事件会变为原生事件，会将事件绑定到子组件的根元素上，这时点击子组件的所有元素都会触发事件，因为产生了冒泡。toParent是自定义事件，自定义事件实现了子组件与父组件的通讯。
Vue学习：组件自定义事件（this指向）（原生事件）
weixin_47295886的博客
02-25 365
this是vc了箭头函数没有自己的this ,所以指向了app。this是student组件实例，谁触发 this是谁。这种写法变成了自定义事件 需要一个修饰符native。前面都是给组件绑定自定义事件，现在是原生事件。APP收到信息，需要在页面展示。但是这里有一个注意事项。
vue组件监听原生事件@click.native
开发路上的AZhe
12-30 895
在组件上使用 v-on 只会监听自定义事件 (组件用 $emit 触发的事件)。如果要监听根元素的原生事件，可以使用 .native 修饰符，比如： <my-component v-on:click.native="doSomething"></my-component> 官网：https://cn.vuejs.org/v2/guide/migration.html#%E7%94%A8-v-on-%E7%9B%91%E5%90%AC%E5%8E%9F%E7%94%9F%E4%B.
Vue学习笔记4.4 绑定原生事件
@凌晨三点半的博客
01-23 199
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;绑定原生组件&lt;/title&gt; &lt;script type="text/javascript" src="vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt
vue2，vue3自定义组件绑定原生事件，触发问题
最新发布
05-13
### Vue2 和 Vue3 中为自定义组件绑定原生事件的触发问题及解决方案 #### 一、Vue2 中的原生事件绑定行为 在 Vue2 中，当尝试在一个自定义组件上绑定原生 DOM 事件时，这些事件并不会自动传播到该组件的根元素。这...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值