首先,$listeners是什么?

假设有父组件Parent和子组件Child

// Parent
<template>
...
<child v-on:event-one="methodOne" v-on:event-two="methodTwo" />
...
</template>

那么你在使用Child时,传入的所有v-on事件都可以在$listeners对象中找到。

// Child
created () {
console.log(this.$listeners) // { 'event-one': f(), 'event-two': f() }
}

所以,官方示例中的computed -> inputListeners就是把用户使用base-input组件时传入的v-on方法收集起来了。
然后通过v-on="inputListeners"的形式,转发给了input框。

注:v-on="{a: f()}"等价于v-on:a="f()"

所以官网才会说base-input是一个透明包裹器,因为它确实只是转发了父组件传入的参数给input元素。

怎么理解vue中$listeners属性?的更多相关文章

  1. 理解Vue的计算属性

    计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行. 上述代码会源源不断的打印出 b 的值.如果希望 a 依赖 ...

  2. 深入理解 Vue Computed 计算属性

    Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...

  3. vue中的$listeners属性作用

    一.当组件的根元素不具备一些DOM事件,但是根元素内部元素具备相对应的DOM事件,那么可以使用$listeners获取父组件传递进来的所有事件函数,再通过v-on="xxxx"绑定 ...

  4. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  5. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  6. 理解vue中的scope的使用

    理解vue中的scope的使用 我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取 ...

  7. 深入理解vue

    一 理解vue的核心理念 使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全. 倘若用一句话来概括vue,那么我首先想到 ...

  8. 深入理解 Vue 组件

    深入理解 Vue 组件 组件使用中的细节点 使用 is 属性,解决组件使用中的bug问题 <!DOCTYPE html> <html lang="en"> ...

  9. Vue.js 计算属性是什么

    Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...

随机推荐

  1. Springmvc使用注解实现执行定时任务(定时器)

    1.在Spring配置文件中添加 <task:annotation-driven/> 2.在需要调用执行定时任务的类中使用注解 @Service @Lazy(false) //避免spri ...

  2. 用python实现的21点游戏

    游戏规则 该游戏的规则与实际的玩法应该有点差异,因为我没有去细查21点的确切玩法,只是根据印象中进行了一系列的定义,具体如下: 1.玩家为人类玩家与电脑玩家,共2个玩家.电脑为庄家. 2.先给人类玩家 ...

  3. IE浏览器中判断IE版本

    <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![e ...

  4. mysql45讲

    一共48讲,学习时间2天. 开篇词 (1讲) 开篇词 | 这一次,让我们一起来搞懂MySQL 理论指导实践:先系统性的学习原理,再实践验证. 你可以从点到线再到面,形成自己到mysql知识网络. 在使 ...

  5. RPC一般指远程过程调用协议

    RPC一般指远程过程调用协议 RPC(Remote Procedure Call)—远程过程调用,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.RPC协议假定某些传输协议 ...

  6. 怎样使用 v-for ?

    v-bind / v-on / v-if / v-for , 这四个指令应该是 vue 里面最常用的了, 之前已经简单记录的前三个的使用方法, 接下来就记一下 v-for 的基本用法. 1. v-fo ...

  7. linux查询cpu过高原因--java

    1. 查询java pid top -c 2. 查询java进程下,线程情况 top -Hp pid(threadIdList) 3. 将10进制线程id转为16进制 printf "%x ...

  8. 浅读vue-router源码,了解vue-router基本原理

    项目中使用vue-router的时候,会进行以下操作(可能具体不是这么写的,但是原理一样): 定义映射关系routes: 定义router实例的时候传入vue和参数{routes...}: 定义vue ...

  9. 用最少的JS代码写出贪吃蛇游戏---迷你版

    游戏进行页面展示 GAME  OVER 页面展示  代码如下: <!doctype html> <html>   <body>   <canvas id=&q ...

  10. jboss日志的自定义

    最近由于想着每次调试socket接收数据情况都需要源码debug好麻烦,要是能把接收到的数据输出到一个单独的日志文件,那出问题的时候,查看问题就方便多了. log4j的日志是可以很方便自定义的,只是这 ...