$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>随机推荐
- 【线性代数】2-2:消元(Eliminate)
title: [线性代数]2-2:消元(Eliminate) toc: true categories: Mathematic Linear Algebra date: 2017-08-31 16:1 ...
- [笔记]C++拷贝构造和移动构造
一.拷贝构造 如果一个构造函数的第一个参数是自身类类型的引用,且任何额外参数都没有默认值,则此构造函数是拷贝构造函数.(<C++Primer,第五版>) class Foo { publi ...
- C#操作 Access 2013(.accdb)的方法
使用的Microsoft.Jet.OLEDB.4.0,的方法并不能连接最新的Access 存储文件,而且Microsoft.Jet.OLEDB.4.0不能使用x64的方式生成,而且使用这个数据库引擎效 ...
- cloud toolkit同时部署多个服务器
首先安装cloud toolkit安装完成之后重启idea 添加host主机信息: 部署到远程服务器 具体信息: 配置本地查看服务器日志信息 启动脚本信息 start.sh #! /bin/sh so ...
- iTerm2使用Profiles自动登录
http://blog.csdn.net/wandershi/article/details/75088310 1.创建Profiles文件 cd ~/.ssh/iTerm2SSH/ vi 172.1 ...
- 微信小程序 图片裁剪
微信小程序 图片裁剪 分享一个微信小程序图片裁剪插件,很好用,支持旋转 文档:https://github.com/wyh19931106/image-cropper 1.json文件中添加image ...
- 一次galera cluster集群故障节点无法启动问题排查
现象 环境: Server version: 10.0.25-MariaDB-wsrep MariaDB Server, wsrep_25.13.raf7f02e 配置文件: [root@node-2 ...
- jeecg随笔
1.根据数据字典code查找该字典下的元素: SELECT typecode,typename from t_s_type where typegroupid=(select id from t_s_ ...
- Sqlite轻量级数据库
SQLite,是一款轻量型的数据库,是遵守ACID(原子性.一致性.隔离性.持久性)的关联式数据库管理系统,多用于嵌入式开发中. SQLite的数据类型:Typelessness(无类型), 可以保 ...
- 面向对语法读取mysql数据库数据例:$db->query($sql)、$result->fetch_array()
前面我们介绍过如何使用面向对象语法连接mysql数据库,今天技术人员继续讲解如何读取数据.虽然与以前面向过程类似,但还是有些不同,需要大家用心了解. echo '面向对象语法连接数据库test db ...