1.hookEvent 是 Vue 的自定义事件结合生命周期钩子实现的一种从组件外部为组件注入额外生命周期方法的功能。

1-1.使用：当实例注册了hook:开头的事件后，会在生命周期钩子函数调用时触发对应的hook事件，例如hook:created、hook:mounted等
1-2.实现原理：<comp @hook:lifecycleMethod=“method” />
- ①处理组件自定义事件的时候（vm.$on) 如果发现组件有 hook:xx 格式的事件（xx 为 Vue 的生命周期函数），则将 vm._hasHookEvent 置为 true，表示该组件有 Hook Event。
- ②在组件生命周期方法被触发的时候，内部会通过 callHook 方法来执行这些生命周期函数，在生命周期函数执行之后，如果发现 vm._hasHookEvent 为 true，则表示当前组件有 Hook Event，通过 vm.$emit(‘hook:xx’) 触发 Hook Event 的执行。
1-3.场景：第三方的Vue组件el-select，我想从外部注入 mounted 生命周期函数。

<el-select ref="select" @hook:mounted="callback"></el-select>
methods: {callback() {console.log("select组件加载完毕");},
},

2.插件用于增强Vue。

2-1.本质：包含 install 方法的一个对象，install 的第一个参数是 Vue，第二个以后的参数是插件使用者传递的数据。
2-2.定义插件：

对象.install = function (Vue, options) {// 1.添加全局过滤器Vue.filter(....)// 2.添加全局指令Vue.directive(....)// 3.配置全局混入(合)Vue.mixin(....)// 4.添加实例方法Vue.prototype.$myMethod = function () {...}Vue.prototype.$myProperty = xxxx
}

2-3.使用插件：Vue.use(对象, 参数…)

import ElementUI from 'element-ui';
Vue.use(ElementUI);

16.钩子事件hookEvent与插件。相关推荐

Vue钩子函数之钩子事件hookEvent,监听组件
在Vue当中,hooks可以作为一种event,在Vue的源码当中,称之为hookEvent. 在Vue组件中,可以用过$on,$once去监听所有的生命周期钩子函数,如监听组件的updated钩子函 ...
wpf checkbox选中触发事件_Web前端开发(16)——JQuery事件绑定与插件
事件绑定 jquery标准的绑定方式 jq对象.事件方法(回调函数); 比如给name绑定点击事件: $("#name").click(function () { alert(&q ...
addeventlistener事件参数_Vue的钩子事件和程序化侦听
对于Vue的事件机制,其实有一些高级技巧,我们最好能够掌握. 一.组件的生命周期钩子事件 Vue的生命周期函数,其实就是Vue开发者设定的一些hook钩子,你只要往hook里面编写代码,它就可以执行. ...
43个处理触摸事件的jQuery插件
随着移动端出现,Web上有很多问题出现,比如说触摸事件(Touch Event).随着问题的出现,总是有很多解决方案的.通过jQuery插件为移动端解决触摸事件.我想你知道一些jQuery插件,或许会 ...
10个用来处理键盘事件的JQuery插件和JS类库
通常在web应用或者网站中,我们使用鼠标来控制元素或者执行导航,相对于桌面应用来说,使用web应用的快捷键次数可能会相对比较少,但是对于熟练的专业人员来说,使用键盘可能更加容易并且更加快速,在今天这 ...
禅道开源版16.2，解决LDAP插件无法使用的问题
1.禅道版本为:16.2 2.使用的ldap插件为如图 3.修改install\xampp\zentao\module\ldap\下的model.php 下载地址
Photoshop插件-保存-8位通道-16位通道-脚本开发-PS插件
文章目录 1.插件界面 2.关键代码 2.1.8位通道 2.2.16位通道 3.代码转执行 4.作者答疑 PS是一款栅格图像编辑软件,具有许多强大的功能,本文演示如何通过脚本实现8位通道和16位通 ...
解决datetimepicker不能触发点击事件，日期插件位置偏移，日期范围限制的问题
最初的问题: 一开始所遇到的问题是相对简单的,就是今天的日期是3-20,但是却可以选择20号之后的日期. html代码: <form action="web?module=stwmgr ...
移动端手势事件 hammer.JS插件
今天我总结一下我以前用的一个移动端手势的插件 HAMMER.JS插件,很好用,而且提供的手势也很多.它没有任何依赖性,它很小,只有7.34 kB最小化+ gzip压缩!我只是简单的总结了一下他的用法, ...

16.钩子事件hookEvent与插件。

概览

1.hookEvent 是 Vue 的自定义事件结合生命周期钩子实现的一种从组件外部为组件注入额外生命周期方法的功能。

2.插件用于增强Vue。

16.钩子事件hookEvent与插件。相关推荐

最新文章

热门文章