$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>随机推荐
- Centos 7 搭建蓝鲸V4.1.16稳定社区版
在本地用VMware模拟了三台主机 准备至少3台 CentOS 7 以上操作系统的机器,保证三台虚拟机都可以上网 最低配置:2核4G(我用的是这个) 建议配置: 4核12G 以上 192.168.16 ...
- Java基础_类的加载机制和反射
类的使用分为三个步骤: 类的加载->类的连接->类的初始化 一.类的加载 当程序运行的时候,系统会首先把我们要使用的Java类加载到内存中.这里加载的是编译后的.class文件 每个类加载 ...
- HA 模式 Hadoop+ZooKeeper+Hbase启动顺序
一. 背景(原http://blog.csdn.net/u011414200/article/details/50437356 ,对其进行了一定更改) 1.1 网络上的大部分教程 都是机器间含有SSH ...
- elasticsearch利用head插件
restful接口使用方法 RESTful接口URL的格式: http://localhost:9200///[] 其中index.type是必须提供的. id是可选的,不提供es会自动生成. ind ...
- redis redis-cli
默认无权限控制: 远程服务连接: $ redis-cli -h 127.0.0.1 -p 6379 windows下 :redis-cli.exe -h 127.0.0.1 -p 6379 redis ...
- SSM整合（自己收藏）
https://github.com/crossoverJie/SSM/blob/master/README-ZH.md
- moveUp()
这个函数内容有点多,想讲一下大概思路: 向上移有两种情况1.前面为空白 这种情况有两个步骤 (1)将人当前的位置设置为空白(0), (2)再讲人前面的位置设置为人(2)2.前面为箱子 当前面为箱子时有 ...
- Leetcode题目49.字母异位词分组（中等）
题目描述: 给定一个字符串数组,将字母异位词组合在一起.字母异位词指字母相同,但排列不同的字符串. 示例: 输入: ["eat", "tea", "t ...
- 批量执行（Linux命令，上传/下载文件）
前言: 每个公司的网络环境大都划分 办公网络.线上网络,之所以划分的主要原因是为了保证线上操作安全: 对于外部用户而言也只能访问线上网络的特定开放端口,那么是什么控制了用户访问线上网络的呢? 防火墙过 ...
- Actuator Elasticsearch healthcheck error
1. 相关环境 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...