vue中的$listeners属性作用
一、当组件的根元素不具备一些DOM事件，但是根元素内部元素具备相对应的DOM事件，那么可以使用$listeners获取父组件传递进来的所有事件函数，再通过v-on="xxxx"绑定到相对应的内部元素上即可。
注意：使用.native修饰符的事件，不会体现在$listeners属性上。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>vue测试</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<style> </style>
</head>
<body>
<div id="app">
<base-input
v-model="username"
label="基础输入组件"
@click.native="handleBaseInputClick"
v-on:focus="handleBaseInputFocus"
placeholder="请输入您的名字"
class="username-input"/>
</div>
<script>
// 注册组件
// 因为base-input的外层是一个label元素，所以默认情况下使用v-on:focus是无效的，所以需要配合$listeners使用，该属性可以把事件的监听指向组件中某个特定的元素
// 注意：如果父级的事件添加了.native修饰符，在$listeners中不会体现出来的
Vue.component('base-input',{
inheritAttrs: false,
props: ['label','value'],
template: `
<label id="base-label">
{{label}}
<input v-bind:value="value" v-bind="$attrs" v-on="inputListeners"/>
</label>
`,
data: function() {
return { }
},
computed: {
inputListeners () {
var vm = this
return Object.assign({},
this.$listeners,
{
input: function () {
vm.$emit('input', event.target.value)
},
focus: function (event) {
vm.$emit('focus', '哈哈哈，onfocus了')
}
}
)
}
},
mounted: function(){
console.log(`$attrs:`)
console.log(this.$attrs)
console.log(`$listeners:`)
console.log(this.$listeners) // 父级添加的所有属性都在这里
},
methods: { }
})
var vm = new Vue({
el: '#app',
data: {
username: ''
},
created: function(){ },
beforeUpdate: function(){ },
computed: { },
beforeUpdate: function () {
console.log(this.username)
},
methods: {
handleBaseInputFocus: function(ev){
console.log(ev)
},
handleBaseInputClick: function(ev){
console.log(ev.type)
}
}
})
</script>
</body>
</html>
vue中的$listeners属性作用的更多相关文章
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue基础系列（二）——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- vue中 key 值的作用
原文地址 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM ...
- vue 中的slot属性(插槽)的使用
总结如下: VUE中关于插槽的文档说明很短,语言又写的很凝练,再加上其和方法,数据,计算机等常用选项在使用频率,使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经 ...
- Vue中的计算属性与$watch
计算属性:在模板中绑定表达式是非常便利的,但是他们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么vue.js将绑定表达式限制为一个表达式. ...
- 浅尝 Vue 中的 computed 属性 与 watch
对于 computed 的理解: ①.computed 用来监控自己定义的变量,该变量不在 data 里面声明,直接在 computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其 ...
- Vue中的computed属性
阅读Vue官网的过程中,对于计算属于与监听器章节的内容有点理解的不清晰:https://cn.vuejs.org/v2/guide/computed.html. 后来上网查询了资料,结合官网的说明,总 ...
- 八、Vue中的computed属性
看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https: ...
- Vue中的计算属性和监听器（computed 与 watch）
react中数据是单向绑定的,而vue中数据是双向绑定的.为什么? 在react中,主要是通过setState 去改变state的值:而在vue中,会自动的触发set 与get 改变属性的值. 在vu ...
随机推荐
- 学到了林海峰,武沛齐讲的Day20 装饰器
import time def timmer(func): #func=test 装饰器架构 def wrapper(): start_time=time.time() func() #就是在运行te ...
- Neo4j数据进行备份、还原
一.neo4j备份方式 neo4j数据库的备份还原分为两种: offline 和 online. Offline backup - dump Dump a database into a single ...
- linux系列（九）：touch命令
1.命令格式: touch [选项] 文件 2.命令功能: touch命令参数可更改文档或目录的日期时间,包括存取时间和更改时间. 3.命令参数: -a 或--time=atime或--time=a ...
- Java基础系列 - 抽象类，子类继承
package com.company; /** * 抽象类继承 * 用abstract修饰类就是抽象类 * 用abstract修饰方法就是抽象方法(一般使用比较少) * 抽象类不能被实例化 */ p ...
- linux 安装nginx -查看 linux的环境变量
我发现在linux上面安装linux很简单 在CentOS release 6.5 上面先看一下操作系统的版本: lsb_release -a 直接执行 yum install nginx 系统自动的 ...
- python 设计模式之状态模式
1.为什么会出现状态模式? 在软件开发过程中,各种应用程序可能会根据不同的情况做出不同的处理.最直接的方案就是把所有的可能发生的情况都考虑到.然后使用条件语句(if...elseif...elseif ...
- Map接口和Collection接口的区别
* Map是双列的,Collection是单列的 * Map的键唯一,Collection的子体系Set是唯一的 * Map集合的数据结构值针对键有效,跟值无关;Collection集合的数据结构是针 ...
- ubuntu14.04 rabbitmq重启丢失用户信息
一.rabbitmq数据是根据当前hostname作为node节点作为数据名保存 二.添加rabbimq用户sudo rabbitmqctl add_user tlwlmy tlwlmysudo ra ...
- HTML5 地理位置定位API（3）
HTML5 地理位置定位实例 这篇文章主要为大家介绍了HTML5地理定位的方法,实例讲述了html5获取坐标完整实现过程, 并对比不同浏览器运行效果给出参考结果,需要的朋友可以参考下 本文实例讲述了h ...
- osg HUD 背景图片设置
#ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include<iostream> #include <osgV ...