首先,$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. TIPTOP之分割split函数方法、getIndexOf、subString、replace、临时表创建;

    范例(cnmq001): 原:每次查询都把数据全部查询到临时表后再筛选: 现:查询到临时表的时候,增加可行的筛选条件,再二次筛选临时表的数据,进行优化: 1)临时表创建: PRIVATE FUNCTI ...

  2. Boot-crm管理系统开发教程(二)

    ps:昨天将管理员登录的功能完成了,并完美的解决跳过登录从而进入管理界面的bug,今天我们将实现"查询用户"功能. ①在po包中创建Customer类,并编写相关变量和添加set/ ...

  3. 安装jenkins时出现 No such plugin: cloudbees-folder的解决办法

    今天安装了一下jenkins,在初始化安装插件时出现" No such plugin: cloudbees-folder"错误,根据网上的教程: 1.打开链接"http: ...

  4. 怎样在 Linux 上查看某个端口的相关信息?

    比如 TCP端口 / UDP端口 / 端口占用程序的进程号 等, 这些信息都可以使用: netstat -atunlp | grep 端口号 来进行获取. 比如我们想获取 22 端口的相关信息: 这里 ...

  5. html常用代码大全

    1.结构性定义 文件类型 <HTML></HTML> (放在档案的开头与结尾) 文件主题 <TITLE></TITLE> (必须放在「文头」区块内) 文 ...

  6. WebStorm 启动时提示Failed to load JVM DLL

    环境:win7 64位:时间:2019-11-18 问题描述 启动webstorm 时提示failed to load JVM DLL 解决方法 启动时快捷方式要选到64位的exe

  7. location(重定向,跳转到其他网页)

    <?php header('Location : https://www.baidu.com'); 这里是在响应头中添加一个 location 的头信息 客户端浏览器在接收到这个头信息过后会自动 ...

  8. Js-声明变量

    JS声明变量 js声明变量的方式有3种:let,const,var 1.const如果定义简单数据类型,变成常量,变量值不可以更改. const name="lili"; name ...

  9. C# 字符串拼接性能探索 c#中+、string.Concat、string.Format、StringBuilder.Append四种方式进行字符串拼接时的性能

    本文通过ANTS Memory Profiler工具探索c#中+.string.Concat.string.Format.StringBuilder.Append四种方式进行字符串拼接时的性能. 本文 ...

  10. centos7.3安装mysql5.7

    一.写随笔的原因:最近在阿里云上买了个centos7.3服务器,想将一些demo运行在上面,所以需要做一些环境的安装,通过此篇文章MAKR一下.下面来记录下安装步骤(参考网上的一些教程,有坑的话会实时 ...