怎么理解vue中$listeners属性?
首先,$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属性?的更多相关文章
- 理解Vue的计算属性
计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行. 上述代码会源源不断的打印出 b 的值.如果希望 a 依赖 ...
- 深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...
- vue中的$listeners属性作用
一.当组件的根元素不具备一些DOM事件,但是根元素内部元素具备相对应的DOM事件,那么可以使用$listeners获取父组件传递进来的所有事件函数,再通过v-on="xxxx"绑定 ...
- 理解Vue中的Render渲染函数
理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- 理解vue中的scope的使用
理解vue中的scope的使用 我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取 ...
- 深入理解vue
一 理解vue的核心理念 使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全. 倘若用一句话来概括vue,那么我首先想到 ...
- 深入理解 Vue 组件
深入理解 Vue 组件 组件使用中的细节点 使用 is 属性,解决组件使用中的bug问题 <!DOCTYPE html> <html lang="en"> ...
- Vue.js 计算属性是什么
Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
随机推荐
- Oracle-DQL 3- 单行函数
单行函数: --使用函数对表中的数据进行运算和处理,针对每行数据返回一个结果,叫做单行函数--包括数字函数,字符函数,日期函数,转换函数,其他函数 1.数字函数 --round(m,n) 将数字m精确 ...
- spring-boot 几个工具类(七)
环境 jdk 6 tomcat 6.0.53 sts 4.4.2 maven 3.2.5 mysql 5.7 SpringContextHolder SpringContextHolder 可以很方便 ...
- zookeeper安装 配置集群
zookeeper下载 http://zookeeper.apache.org/releases.html. 解压 重命名 新建data log两个文件夹配置单个启动 tar -xvf zookeep ...
- Servlet简单例子
一.项目结构 二.index.jsp <%@ page contentType="text/html; charset=utf-8" %> <html> & ...
- Neo4j Cypher语法(一)
目录 Cypher手册详解 1 背景 2 唯一性 3 语法 3.1 命名规则 3.2 表达式 3.3 变量与保留关键字 3.4 参数 3.5 操作符 3.6 模式 3.7 列表 Cypher手册详解 ...
- 阿里云语音合成(汉语英语)带UI界面的小程序(python)
一,项目说明 将汉文转汉语.英文转英语,同时又有逗号<###English###>,<,,,>和句号<...>标志符用于文件处理.其中英文包含在### 英文 ### ...
- 帝国cms常用标签
.loop获取时间标签 /*获取年月日,时分秒.可以按照自己的需求单独获取年,或者月.*/ <?=date("Y-m-d H:i:s",$bqr[newstime])?> ...
- HTML的学习(注释)
<!--charset 编码字符集--> <!--UTF-8 万国码 gb2312 中国标准第2312条 中文,韩文....大部分的亚裔语言(繁体字不支持) GBK 在上面的基础之上 ...
- 转载: Linux查看系统开机时间
转自: https://www.cnblogs.com/kerrycode/p/3759395.html 查看Linux系统运行了多久时间,此时需要知道上次开机启动时间: 有时候由于断电或供电故障突然 ...
- Python实现读取Excel文档中的配置并下载软件包
问题:现在遇到这样一个问题,服务器存储了很多软件包,这些包输入不同的产品,每个产品都有自己的配置,互相交叉,那么到底某一产品所有配置的软件包下载后,占用多大空间呢? 分析:从这个问题入手,了解到:软件 ...