如何实现一个简易版的v-on?

·  阅读 110

v-on

在Vue中,会经常用到v-on去完成事件的绑定,若它是用在普通元素上,就是用来监听原生的DOM事件,而如果是用在自定义元素的组件上时,它可用来监听子组件触发的自定义事件。 比如:

//原生DOM事件
<div @click='xxx'> </div>
<div @keypress='yyy'> </div>

//监听自定义事件
<Note @update:value='aa'/> 
复制代码

directive

v-on是如何去绑定的事件监听器呢?在这之前需要先了解下directive的使用。如果说v-on,v-bindvue自带的指令,那么directive的功能就是去完成自定义指令的创建
directive可以实现全局和局部指令的定义。具体格式如下:

// 全局指令--任意组件都能用到
Vue.directive('x',directiveOptions)

//局部指令--即在对应的组件内部定义,此指令也只有这个组件能够使用
export default{
    directives:{
        y:directiveOptions,
        x:directiveOptions
    }
}

复制代码

具体实现:

了解完格式之后,就来具体看看如何自定义简易版的v-on功能。

image.png

假设我有这样的一个指令v-on2,它的功能是监听元素的点击事件,然后在事件触发时去执行函数hi.这该如何实现 其实分析下来我们要注意以下几点:

1:如何获取到`v-on2`监听到的具体是啥事件?
2:又如何知道对应事件后所赋的值是什么?
复制代码

首先,每个指令都有几个钩子函数可设置,格式为:
<script>

export default{
    directives:{
        on2:{
            bind(el,binding,vnode,oldVnode){}, //类似created
            inserted(参数同上){}, //类似mounted
            update(参数同上){}, //类似updated
            componentUpdated(参数同上){},
            unbind(参数同上){}, //类似destroyed
        }
    }
}

</script>
复制代码

对应的钩子函数括号内参数的作用为:

image.png
我们这里选择在inserted这个阶段完成事件的绑定,根据上图可知,有关事件的绑定详情可通过binding属性来得到。

而从下图的这个打印结果来看,我们可以通过argvalue属性来分别得到所监听的事件和赋给事件的值。

image.png

最终代码如下:

image.png

这就是实现简易版的v-on的过程

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改