首先,$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. 【LOJ】#3030. 「JOISC 2019 Day1」考试

    LOJ#3030. 「JOISC 2019 Day1」考试 看起来求一个奇怪图形(两条和坐标轴平行的线被切掉了一个角)内包括的点个数 too naive! 首先熟练的转化求不被这个图形包含的个数 -- ...

  2. TCP的组包、半包、粘包与分包

    一.概念 1)组包.简单的说就是tcp协议把过大的数据包分成了几个小的包传输,接收方要把同一组的数据包重新组合成一个完整的数据包. 2)半包.指接受方没有接受到一个完整的包,只接受了部分,这种情况主要 ...

  3. Fabric的简介

    1,初识fabric 1,什么是fabric fabric是一个Python的库和命令行工具,用来提高基于SSH的应用部署和系统管理的效率. 简单来说: (1)一个让你通过命令行执行无参数python ...

  4. zookeeper初识

    ZOOKEEPER是为分布式系统提供高性能的协调工具 角色: 1.领导者(leader):负责进行投票的发起和决议,更新系统状态2.学习者(learner):包括跟随者(follower)和观察者(o ...

  5. windows下 qt5&vs2010 在qtCreator下中文乱码

    环境:windows2012下 qt5.3.1 & vs2010 在qtCreator3.1.2下中文乱码 解决方法:在相关文件中加入代码 #ifdef Q_OS_WIN32 #if _MSC ...

  6. O050、Create Volume 操作 (Part I)

    参考https://www.cnblogs.com/CloudMan6/p/5603312.html   前面已经学习了Cinder的架构和相关组件,从本节开始详细分析 Cinder 的各种操作,首先 ...

  7. Mongodb安装后在任务管理器中找不到这个服务

    今天安装mongodb,但是一开始在任务管理器中找不到这个服务,后来查询得知:稍微高一些的系统是需要通过管理员身份运行cmd命令行安装的. orz,找了好久才知道是这个问题. 2333 在任务管理的服 ...

  8. 这不是javascript:什么?

    javascript协议.<a href=“javascript:void(0):”>xxx</a>基于事件的事件,例如:<input onblur=“check():” ...

  9. 第十章、random模块

    目录 第十章.random模块 第十章.random模块 #随机生成0-1之间的小数 import random print(random.random()) print(random.randint ...

  10. jar包编译成 dex

    1.将需要合并的jar放到同一个目录 2.编写一个google.xml文件写入如下内容 <!--?xml version="1.0" encoding="utf-8 ...