Vue 中给组件绑定原生事件

2019-02-11 admin
<div id="root">
    <child @click="handleClick"></child>
</div>
Vue.component('child',{
    template:'<div @click="handleChildClick">content</div>',
    methods: {
        handleChildClick(){
            alert('click child')
            this.$emit('click')
        }
    }
})
let vm = new Vue({
    el: '#root',
    methods: {
        handleClick(){
            alert('click')
        }
    }
})

当我给一个组件绑定一个事件的时候,实际上这个事件绑定的是自定义的事件,也就是你真正的鼠标点击触发的事件,并不是我绑定的click事件,如果想触发自定义的click事件,在子组件里对元素进行事件绑定,这个事件才是真正的原生事件。

在元素上绑定的事件,监听的是原生事件,在组件上绑定的事件,监听的是自定义事件,需要用this.$emit()来触发。

在开发的过程中这样写有点太麻烦,假如我有这样的需求,我就想在子组件上监听原生的事件,该怎么做呢?

<div id="root">
    <child @click.native="handleClick"></child> //native 是事件修饰符
</div>
Vue.component('child',{
    template:'<div>content</div>',
})
let vm = new Vue({
    el: '#root',
    methods: {
        handleClick(){
            alert('click')
        }
    }
})

这个时候,在组件上面做事件的监听,并不是自定义事件,而是一个原生的click事件,只要在事件绑定的后面加上一个native这样的事件修饰符就可以了。

原文链接:https://segmentfault.com/a/1190000018120443

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53537.html

文章标题:Vue 中给组件绑定原生事件

相关文章
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
WebSocket断开原因分析,再也不怕为什么又断开了
阅读原文:https://wdd.js.org/websocket-… 1. 把错误打印出来 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来。 在线demo地址:https://wdd.js.org/we...
2018-04-25
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
JavaScript短路原理精简代码
js中||和&amp;&amp;的特性帮我们精简了代码的同时,也带来了代码可读性的降低,虽然高效,但请灵活使用。 在js逻辑运算中,0、&quot;&quot;、null、false、undefined、NaN都会判为false,其他都为t...
2015-11-12
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
回到顶部