$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>随机推荐
- C语言中的指针加减偏移量
C语言指针偏移技巧(也是一个要注意的坑) - 陈杰柱的博客 - CSDN博客 https://blog.csdn.net/cjzjolly/article/details/82116772 C语言中 ...
- LVS集群之DR模式
今天来讲LVS-DR模式集群实现负载均衡的搭建方法 环境 主机名 IP 系统 角色 dir DIP:192.168.199.9 VIP:192.168.199.8 rhel7.4 集群服务器 no ...
- 提高组刷题营 DAY 2
1.滞空(jump/1s/64M) #include<bits/stdc++.h> using namespace std; typedef long long LL; ; inline ...
- 前端知识点回顾之重点篇——ES6的Promise对象
Promise Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异 ...
- DML语句
DML 操作是指对数据库中表记录的操作,主要包括表记录的插入(insert).更新(update).删除(delete)和查询(select),是开发人员日常使用最频繁的操作. 插入记录 表创建好后, ...
- 15.kubernetes认证及serviceaccount
kubernetes认证及serviceaccount 认证 授权:RBAC(目前的主流授权方式) 准入控制:了解即可 --> 认证 授权 准入控制 客户端 -->api-server: ...
- python3.7与pyspider的坑
网络上安装pyspider的坑有很多,但都不如我今天的大,困扰了我几天,终于解决了 Traceback (most recent call last): File "/ffk_learn/s ...
- Java 泛型，你了解类型擦除吗？
泛型,一个孤独的守门者. 大家可能会有疑问,我为什么叫做泛型是一个守门者.这其实是我个人的看法而已,我的意思是说泛型没有其看起来那么深不可测,它并不神秘与神奇.泛型是 Java 中一个很小巧的概念,但 ...
- ECLIPSE 安卓项目 迁移 android stiod
JNI 处理 http://www.cnblogs.com/flyme/p/4431762.html 导入ECLIPSE项目 http://blog.csdn.net/molei1991/articl ...
- Python 常用模块(1) -- collections模块,time模块,random模块,os模块,sys模块
主要内容: 一. 模块的简单认识 二. collections模块 三. time时间模块 四. random模块 五. os模块 六. sys模块 一. 模块的简单认识 模块: 模块就是把装有特定功 ...