vue -on如何绑定多个事件

jzman 发布于2019-08-23 14:53 / 2247人阅读

摘要：参数数组只在中支持用法监听当前实例上的自定义事件。事件可以由触发。回调函数会接收所有传入事件触发函数的额外参数。指令绑定的前一个值，仅在和钩子中可用。

参数：

{string | Array} event (数组只在 2.2.0+ 中支持)
{Function} callback

用法：

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

vue-on的api，就是说v-on只能传入单个健值对，如果要一次性绑定多个事件，那只能使用@onError=function @onChange=function这样的操作，可是这么做看起来不直接，当我们想把事件的方法统一起来，或者通过组件传递事件方法就有些棘手了

在讲代码之前我们先了解一下vnode和directive，vnode是vue的虚拟dom，具体的实现和原理有兴趣的同学可以的了解一下，这里我们要讲一下vode上暴露的方法，vnode.componentInstance: Component | void; // component instance，what?这个是什么东西，这个东西是当前节点对应的组件的实例，也就是说等同于vm。这里要知道vue的api方法不仅可以在template中使用，也可以在class中使用的，也是时说你可以@onChange=function，也可vm.on("on-change",function),重要的是你要开心，这里注意在实例上的方法要使用横线命名的方法，等同于template的驼峰写法。好啦，现在我们说了这么多，没有vnode有什么用啊，....，好吧，那先开始讲如何获取vnode，前面说到directive，让我们看一下它的回调函数暴露的参数

指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

是的，你看到了vnode，剩下的不用我说了吧

上代码

Vue.directive("events", function (el,binding,vnode) {
    let {events} = binding.value || {};
    for(let i in events) {
        if (events.hasOwnOroperty(i)) {
            let v = events[i];
            let k = i.replace(/[A-Z]/g, match=>`-${match.toLowerCase()}`);
            vnode.vnode.componentInstance.$off(k, v);
            vnode.vnode.componentInstance.$on(k, v);
        }
    }
  }
)

因为update的缘故，所以必须讲原来绑定的函数解绑再绑定一次，以免造成重复触发回调

漫漫前端路，共勉

私有云 GPU服务器 Vue_Vue Vue vue3 学习笔记 (五)——vue3 _vue

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101296.html

【收藏】2019年最新Vue相关精品开源项目库汇总

摘要：前言本文的前身是源自上的项目但由于该项目上次更新时间为年月日，很多内容早已过期或是很多近期优秀组件未被收录，所以小肆今天重新更新了内容并新建项目。提交的项目格式如下项目名称子标题相关介绍如果收录的项目有错误，可以通过反馈给小肆。前言本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日，很多内容早已过期或是很多近期优...

williamwen1986 2019-08-23 14:50 评论0 收藏0
推荐给新手的35个好用的Vue开源库

摘要：无论是开发新手还是经验丰富的老手，我们都喜欢开源软件包。所幸的是，随着社区的不断壮大，每天都会出现一些很好的软件包。在下文中，我们将推荐一些非常好用的开源库是一个非常易用的渐进式框架，用于构建用户界面。的一个极简主义的深色设计系统。无论是开发新手还是经验丰富的老手，我们都喜欢开源软件包。对于开发者来说，如果没有这些开源软件包，很难想象我们的生活会变得多么疲惫不堪，而且靠咖啡度日也会成...

oliverhuang 2019-08-23 14:59 评论0 收藏0
Nuxt.js按需引入 emement-ui

摘要：全面配置文章系列安装依赖修改修改 ☞☞☞nuxt.js全面配置☜☜☜ ☞☞☞nuxt文章系列☜☜☜ babel-plugin-component 安装依赖 npm i -D babel-plugin-component // or yarn add -D babel-plugin-component 修改nuxt.config.js module.exports = { bui...

microcosm1994 2019-08-23 14:08 评论0 收藏0
用 Vue 来写 React 和 ReactNative

摘要：的响应核心的响应式系统是支撑整个框架运行的关键，也是的核心之一，官方对这个核心的分层设计得很好也是依靠其驱动原生视图。我们日常用到的都由核心提供，对这个核心稍作修改，去掉和，意外的获得了一个极小的响应核心，可以运行于任何标准引擎下。 showImg(https://segmentfault.com/img/bVPMZy?w=1468&h=826); GitHub: react-vue ...

maybe_009 2019-08-20 17:33 评论0 收藏0