$listeners 在vue中的使用 --初学
事件回传之 $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>
-----------------------------------------------------------
实例二
<div id="app">
<child1
:p-child1="child1"
:p-child2="child2"
:p-child-attrs="1231"
v-on:test1="onTest1"
v-on:test2="onTest2">
</child1>
</div>
<script>
Vue.component("Child1", {
inheritAttrs: true,
props: ["pChild1"],
template: `
<div class="child-1">
<p>in child1:</p>
<p>props: {{pChild1}}</p>
<p>$attrs: {{this.$attrs}}</p>
<hr>
<child2 v-bind="$attrs" v-on="$listeners"></child2></div>`,
mounted: function() {
this.$emit("test1");
}
});
Vue.component("Child2", {
inheritAttrs: true,
props: ["pChild2"],
template: `
<div class="child-2">
<p>in child->child2:</p>
<p>props: {{pChild2}}</p>
<p>$attrs: {{this.$attrs}}</p>
<button @click="$emit('test2','按钮点击')">触发事件</button>
<hr> </div>`,
mounted: function() {
this.$emit("test2");
}
});
const app = new Vue({
el: "#app",
data: {
child1: "pChild1的值",
child2: "pChild2的值"
},
methods: {
onTest1() {
console.log("test1 running...");
},
onTest2(value) {
console.log("test2 running..." + value);
}
}
});
</script>随机推荐
- delphi将两个Strlist合并，求交集 （保留相同的）
Function StrList_Join(StrListA,StrListB:String):String; //将两个Strlist合并,求交集 (保留相同的) var SListA,SListB ...
- 顺序表应用1：多余元素删除之移位算法（SDUT 3324）
Problem Description 一个长度不超过10000数据的顺序表,可能存在着一些值相同的"多余"数据元素(类型为整型),编写一个程序将"多余"的数据 ...
- Python装饰器的应用场景
装饰器的应用场景 附加功能 数据的清理或添加: 函数参数类型验证 @require_ints 类似请求前拦截 数据格式转换 将函数返回字典改为 JSON/YAML 类似响应后篡改 为函数提供额外的数据 ...
- Nginx之编写HTTP模块
1. 常用数据结构 1.1 ngx_str_t typedef struct { /* * 字符串的有效长度 */ size_t len; /* * 有效字符串的起始地址,该字符串通常并不以'\0'结 ...
- 复杂sql语句集锦
本文主要讲一下笔者在工作中遇到的一些逻辑比较复杂的sql语句,下面是具体写法: SELECT IF ( LOCATE() , NULL, SUBSTRING( link, LOCATE() , IF ...
- 本地服务CURL请求本地另一个服务API返回超时/或无返回
入职之后一直在忙,终于有时间整理一波最近踩到的坑. 起因: 项目是微服务架构,一个项目对外提供API,新的项目调用API获得数据.于是就在本地搭建了两个服务.配置了两个虚拟域名,指向两个项目,当然我本 ...
- C#计算两个时间年份月份天数（根据生日计算年龄）差，求时间间隔
C#计算两个时间年份月份差 DateTime dt1 = Convert.ToDateTime("2008-8-8"); DateTime dt2 = System.DateTim ...
- 012-数据结构-树形结构-哈希树[hashtree]、字典树[trietree]、后缀树
一.哈希树概述 1.1..其他树背景 二叉排序树,平衡二叉树,红黑树等二叉排序树.在大数据量时树高很深,我们不断向下找寻值时会比较很多次.二叉排序树自身是有顺序结构的,每个结点除最小结点和最大结点外都 ...
- Linux命令行如何返回上一次的目录
千辛万苦进入了一个很深层的目录,一不小心输入了cd并回车 ......... 并不是再进一次,对于bash来说,只需要很管理的一个命令: cd - 该命令等同于cd $OLDPWD,关于这一点在bas ...
- React Native细节知识点总结<二>
1.关于React Native导出组件的export default和export的问题: 一个文件只能有一个export default,可以有多个export export class Temp ...