给组件绑定原生事件以及事件修饰符native

最新推荐文章于 2022-06-07 23:20:47 发布
最新推荐文章于 2022-06-07 23:20:47 发布
阅读量214 收藏
点赞数
分类专栏： vue 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dyw3390199/article/details/112424883
版权

在这里插入图片描述
上述代码点击页面的Child不会有任何输出，因为绑定的是自定义事件。想要有输出，需要这样做：
在这里插入图片描述

<body>
    <div id="app">
        <child @click="handleClick"></child>
    <
最低0.47元/天 解锁文章
Akimoto Hiroshi
关注
专栏目录
VUE之组件（绑定原生事件、$listeners、$ref）
weixin_45626166的博客
10-28 835
组件绑定原生事件 有时，我们想要在一个组件的根元素上直接监听一个原生事件，一般操作步骤如下 1、首先定义一个 child 组件，什么事件都不绑定，代码如下： 步骤： 2、接下来，给 child 组件增加一个 @click 事件，如下所示 3、这个 handleClick 方法是谁的呢？当然是父作用域下的方法，所以接下来在根组件中增加一个方法，代码如下 分析验证： 当点击按钮的时候发现，没有...
给组件绑定原生事件加native修饰符（Vue）
Twinkle的博客
07-18 812
&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",{       
监听组件根元素的原生事件——修饰符.native
<WRM>的博客
08-06 512
<back-top @click.native="backClick"></back-top> methods: { backClick() { console.log("----------"); }, },
vue绑定点击事件@click_复习之给Vue组件绑定原生事件（v-on修饰符.native）
weixin_39688875的博客
12-12 592
在组件上去监听事件时，我们监听的是组件的自动触发的自定义事件，如： <div id="app"> <a-cmp @click='handleClick'></a-cmp> </div> <script> const vm = new Vue({ el: '#ap...
vue框架的.native修饰符：将原生事件绑定到组件
dx_zheng的博客
12-11 329
vue的.native：将原生事件绑定到组件的理解 阅读官网时，看到这里很懵，查了一些资料才理解.native的用法： 通俗一点解释，就是再我们自己写的一些组件上面，正常的话是用不了原生事件的，比如点击事件click、聚焦focus等，比如这样： my-component组件是我们自己写的，直接使用原生事件click，这时点击是触发不了outClick函数的。 所以我们要加上.native修饰符： <div> <my-component @click.native="outClick
14-自定义事件 & .native原生事件绑定到组件 & .sync修饰符
weixin_41802265的博客
01-26 330
事件名: 事件名不存在自动大小写转换,触发事件名需要完全匹配监听事件的名称 this.$emit('myEvent') /* 监听名字的 kebab-case 版本不会任何效果 */ &lt;my-component v-on:my-event="doSomething"&gt;&lt;/my-component&gt; 自定义组件的 v-model: 默认利用 value 的 prop 和...
vue学习笔记之给组件绑定原生事件操作示例
10-15
本篇文章将详细介绍如何在Vue组件中绑定原生事件以及遇到的问题及其解决方案。 首先，当我们尝试在父组件中直接为子组件定义一个点击事件（如`@click`），并期望它能正常触发时，会发现事件并未按预期工作。这是...
Vue事件修饰符native、self示例详解
10-16
修饰符native主要应用于子组件上，它的作用是让父组件能够监听到子组件内部的原生事件。在Vue中，当我们在自定义组件上使用不带native的事件时，比如`<Son @click="handler1"></Son>`，实际上是把事件处理器绑定到了...
浅谈vue中组件绑定事件时是否加.native
10-16
本文将深入探讨Vue组件绑定事件时是否需要添加`.native`修饰符及其背后的原理。 1. 普通组件绑定事件 在Vue中，当我们为一个普通的HTML元素（如`<input>`、`<button>`等）绑定事件时，可以直接使用`@event`语法，...
[vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)
weixin_30839881的博客
05-11 385
preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了不能跳转 <body> <a href="http://w3cschool.cc/">Go to W3Cschool.cc</a> <p>The pre...
vue.js给自定义组件绑定原生事件
Amanda_wmy的博客
11-08 2591
vue.js给自定义组件绑定原生事件 .native修饰符 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符： &lt;base-input v-on:focus.native="onFocus"&gt;&lt;/base-input&gt; // 如果不写.native事件是无效的 例子： &lt;div id='root'&...
给子组建绑定原生事件（@click.native）
yuzhongkai的博客
09-02 1746
通过.native属性后就不用通过子组件的事件触发this.$emit('事件')触发了 但两个没有父子关系的组件通过什么传值，还是要通过$emit('事件名'，值) 1.在vue实例下挂在一个属性bus， 2.vue实例存在$emit方法，bus作为vue实例下的属性，也有这个方法 3.通过bus的$emit方法指定触发的事件名 4.然后在mounted下用bus.$on监听bus...
事件修饰符-大汇总
HQ\(^o^)/的博客
06-07 640
修饰符大汇总
vue中组件绑定原生事件不生效
qq_40576178的博客
12-24 1090
如果在组件中，遇到绑定原生事件（click等事件）不生效的话，在事件后面+.native即可生效 原理： 有些element ui中的组件可以绑定原生事件，但有些组件是无法绑定原生事件的，如果element ui 中有提供组件的事件即可用提供的事件；如果没有提供的事件，可以通过.native转为原生事件即可生效（代码在解析组件后会生成原生元素） 注意： .native 绑定原生事件 图中给下拉菜单中的子菜单组件绑定点击事件，不加.native此时事件不生效 组件提供了点击某个下拉子菜单做不同的操作 1、
[Vue] 给组件绑定原生事件
BnuzLeon的博客
02-13 559
NATIVE EVENT 例子 参考代码：code 实现功能： 给组件绑定原生事件的两种实现方法 方法一 注意 声明一个组件： var child = { template: '&lt;div&gt;Click&lt;/div&gt;', } 使用组件并且绑定事件： &lt;child @click="handleClick"&gt;&lt;/child&gt; 事件方法实现： m...
element-ui element-plus dialog - 分析
huxianc的博客
12-21 3401
源代码地址 - dialog version:element-plus 1.0.1-beta.0 index.vue <template> <!-- dialog是v-if控制渲染的 --> <template v-if="destroyOnClose && !visible"></template> <template v-else> <!-- vue3 新增组件 teleport to表示元素.
Vue_给组件绑定原生事件
大脸猫~
06-29 1323
当我们使用组件的时候，想点击组件触发事件，要在子组件里定义触发事件，在父组件定义是没用的. 只有从子组件往外触发自定义事件，父组件里定义的触发函数才有用。 那么怎么样才能直接在父组件上定义触发函数，不需要经过子组件呢？ 在触发事件上加上.native eg： &amp;lt;counter @click.native=&quot;handerClick&quot;&amp;gt;&amp;lt;/counter&amp;gt; hand...
element-ui element-plus carousel - 分析
huxianc的博客
12-10 1727
main源代码地址 item源代码地址 version:element-plus 1.0.1-beta.0 item <template> <div v-show="data.ready" class="el-carousel__item" :class="{ 'is-active': data.active, 'el-carousel__item--card': type === 'card', 'is-in-sta.
Vue事件绑定揭秘：v-on机制与修饰符详解
4. .native - 监听组件根元素的原生事件。 5. .once - 确保事件处理器只会被调用一次。 6. .left -（2.2.0+）只在点击鼠标左键时触发。 7. .right -（2.2.0+）只在点击鼠标右键时触发。 8. .middle -（2.2.0+）只在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值