Vue|Vue 组件上的类似 DOM 事件那点事儿 Vue组件上的类似DOM事件那点事

click 是事件.
事件是基本的 DOM 元素都具备的一个特性.
一个 DOM 元素不管是否绑定了事件响应函数.
只要我们点击了(或者触摸了)这个 DOM 元素.那么在其内部一定就会发出一个对应的事件信号.

.....div.onclick = function () {} button.onclick = function () {} p.onclick = function () {} span.onclick = funciton () {} ....

组件上的 click
首先组件是一个 js 对象.
里面包含了一堆和当前组件相关的数据和函数.

HelloWorld.vue- data () {} - methods: {} - watch: {} - computed: {} - components: {} ....

当在语法级别,我们给定一个第三方组件绑定 click 事件时.

并在当前组件内部定义事件响应函数

HelloWorld.vuemethods: { hanlderClick () { console.log('点击 cube-button 事件将被触发.') } }

点击 cube-button 时,事件将被触发,乍看之下,感觉这很符合直觉.
(本来就是写的一堆跑浏览器下的玩意,click 事件不是很常见吗?)
但是稍微深入思考一下,就会发现问题所在了.
往组件上绑定事件到底是在干什么?
已经知道了,组件本身是一个 js 对象.
我们在组件上绑定 @click 事件,翻译一下就是: 往组件上绑定 click 事件.
现在的问题是,一个普通的 js 对象 Object.
它是不具备 click 事件特性的.
它不可见,它是数据,用户根本就不可能想普通的 HTML 元素那样用肉眼看到它.
看不到它,怎么可能去点击它.就更不可能有 click 这个存在于肉眼可见的 DOM 元素上了.
所以,能够触发 click 事件的,肯定是组件内部以某种方式向外发布了 click 事件.$emit
1. 直接在组件上绑定 click 事件.

const CompOne = { template:`{{content}}`, props:['content'] }

var app = new Vue({ el: '#app', data: {}, methods: { handlerClick () { console.log('写在组件上的 click') } } }

点击组件发现并没有任何效果:

文章图片
组件直接绑定事件没有任何结果 2.当组件内部任意一个可以被用户点击到的 DOM 元素发布一个 click 事件

const CompOne = { template:`{{content}}`, props:['content'], methods: { hanlderClick () { this.$emit('click') // 最外层 DIV 元素看的到,用户点击这个 div,手动的向外部发送 click 事件. } } }

结果:

文章图片
内部手动的给组件的某个 HTML 元素绑定 click，然后在 clickhanlder 内向外发布 click 事件结论:在组件上监听click事件的本质是,被监听事件的组件内部,无论以何种方式,必须想外部$emit 出 click 事件信号才可以.

常规方式是,利用组件内模板用户可视可操作的某个 DOM 元素点击的时候触发 $emit('click')
不常规做法是,不利用上述这种的任意其他方式.比如定时器.

3.@click.native
如果,我们直接在组件上使用 @click 就必须手动的在被监听了 click 的组件内部调用 $emit.
而 @click.native 修饰符则就是帮我们做了一件事情而已.
在被监听了 @click 的组件内部的 DOM 根元素上自动的注册 click 事件.
并定义 clickHanlder .
在此 clickHanlder 内,触发 this.$emit('click')

const CompOne = { // template:`{{content}}`, // @cilck.native 等价 @click = clickhanlder template:`{{content}}`, // 内部不需要在手动的注册并调用 click 事件响应函数了 props:['content'], methods: { // hanlderClick () { // @cilck.native 等价 @click = clickhanlder //this.$emit('click') // } } } var app = new Vue({ el: '#app', data: {}, methods: { handlerClick () { console.log('写在组件上的 click') } } }

【Vue|Vue 组件上的类似 DOM 事件那点事儿】结果

文章图片
@click.native 默认就是帮我们做了：组件根元素绑定 click，提供 clickhandler，在 clickhandler 内部发布 click 仅此而已关于组件上定义 DOM 事件说明

和在组件上定义任意事件本质上一样的.(不管是 DOM.click, 还是 whateverEvent). 都是需要组件内部去触发.
例子里定义的 click ,对于组件来说,不存在这样的事件,组件本身是一个 Object 对象,不可视元素,是数据,用户根本无法操作它,更加不会有 click 事件了.所以需要靠内部的不管是 DOM 也好,其他方式也罢,在某个时刻触发 click 事件 (this.$emit('click'))
对于原生的 DOM 事件来说,@click.native 的 native 修饰符,Vue 默认值是帮我们在组件的根模板元素上绑定了 click 函数,并在此函数内部发布了 click 事件仅此而已.(this.$emit('click'))