【每日知识】Vue事件修饰符.native

问题
在写代码时注意到click事件的native修饰符，如下：

<el-dropdown-item divided @click.native="logout"><span style="display:block;">退出登录</span>
</el-dropdown-item>

这里的native是什么，有什么用？

事件修饰符native

.native修饰符的作用
.native事件修饰符是用来是在父组件中给子组件（自定义组件）绑定一个原生的事件，就将子组件变成了普通的HTML标签看待。

在监听原生事件的同时，设置一个.native修饰符，这样就可以正常监听了

应用场景：

给按钮设置点击事件：

<button @click="logout()">退出</button>     <--! 事件操作成功 /-->

@click是vue事件绑定操作，具体是给普通的html标签使用的。

给下拉组件项设置点击事件：

<el-dropdown-item @click="logout()">退出</el-dropdown-item>   <--! 事件操作失败 /-->

el-dropdown-item本身是一个“组件”，组件是很多html标签的集合体，给这个集合体绑定事件，但是不知道具体给到哪个标签使用，因此事件绑定失败。

解决方案：

给事件绑定设置一个名称为native的修饰符(事件修饰符)，使得该事件作用到内部的html标签身上：

<el-dropdown-item @click.native="logout()">退出</el-dropdown-item>   <--! 事件操作成功 /-->

对于自定义的组件，如果添加@click而不加.native，我们点击这个组件，logout会执行吗？带着以上问题我们接着往下看。

经过测试我们发现当在父组件中给自定义组件添加@click而不加.native修饰时，点击不会被触发。这是因为自定义事件内部并没有$emit这个click事件。而对于内置dom元素（例如div, button,p,.......） vue会自动绑定系统事件（click, mouseenter，.....）。所以对于普通的自定义的组件我们要自己处理。

【每日知识】Vue事件修饰符.native相关推荐

vue事件修饰符.native
问题在写代码时我注意到click事件的native修饰符,如下: <el-dropdown-item divided @click.native="logout">& ...
vue事件修饰符有哪些
vue 事件修饰符 1.prevent:阻止默认事件 2.stop:阻止事件冒泡 3.once:事件只触发一次 4.capture:使用事件的捕捉模式 5.self:只有event.target是当前 ...
Vue 事件修饰符详解
本人后端程序员,由于绑页面需要使用vue,在自学的过程中不懂事件修饰符,特此请教后才理解,在这提出我的分享,忘各位大神指正. vue官网上指出: 在事件处理程序中调用 event.preventDef ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
vue 事件修饰符按键修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求. .stop 阻止单击事件传播即阻止了事件冒泡, ...
Vue事件修饰符的总结
分为六点: 1.prevent 阻止默认行为(常用) 2.stop 阻止事件冒泡(常用) 3.once 事件值触发一次(常用) ...
vue事件修饰符，六次实操带你快速了解与应用~
一.速识概念: 你好呀,最近过的怎么样?今天总结了vue常见的事件修饰符,学习面试都是常遇到的,快来看看吧~
Vue事件修饰符（prevent，stop，once，capture，self）
1.Vue的事件修饰符: 1.prevent 阻止默认事件(常用) 2.stop:阻止默认冒泡(常用) 3.once:事件只触发一次(常用) 4.capture:使用事件的捕获模式 5.self:只有 ...
vue 事件修饰符与按键修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是: ...

【每日知识】Vue事件修饰符.native

【每日知识】Vue事件修饰符.native相关推荐

最新文章

热门文章