事件回传之 $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>

随机推荐

  1. ubuntu安装chrome driver

    首先下载Chrome Driver(Firefox Driver的安装与该步骤相同) 链接: http://chromedriver.storage.googleapis.com/index.html ...

  2. Solr6.0环境搭建

    感谢TTTTTTTTT丶的分享. 转载地址: 点击打开链接 准备工作: 目前最新版本6.0.下载solr 6.0:Solr6.0下载 JDK8 下载jdk1.8:jdk1.8[solr6.0是基于jd ...

  3. Codeforces 959D. Mahmoud and Ehab and another array construction task(构造, 简单数论)

    Codeforces 959D. Mahmoud and Ehab and another array construction task 题意 构造一个任意两个数都互质的序列,使其字典序大等于a序列 ...

  4. maven mvn 命令行 编译打包

    * 配置好jdk * 下载安装maven http://maven.apache.org/download.cgi apache-maven-3.3.3-bin.zip * 解压到G:\apache- ...

  5. git-本机内容git至github

    1.修改仓库的名字 github中右上角/settings/Account: 修改后显示的变化: 2.本地和github账号创建联系 (base) localhost:~ ligaijiang$ ss ...

  6. JVM内存管理 + GC垃圾回收机制

    2.JVM内存管理 JVM将内存划分为6个部分:PC寄存器(也叫程序计数器).虚拟机栈.堆.方法区.运行时常量池.本地方法栈 PC寄存器(程序计数器):用于记录当前线程运行时的位置,每一个线程都有一个 ...

  7. linux服务之memcached

    http://www.runoob.com/memcached/memcached-cas.html https://github.com/memcached/memcached/blob/maste ...

  8. React Native 常用第三方组件

    React-Native-Elements 一组开发RN的UI工具包(强烈推荐)

  9. OpenCL如何获取最小线程并行粒度

    由于OpenCL是为各类处理器设备而打造的开发标准的计算语言.因此跟CUDA不太一样的是,其对设备特征查询的项更上层,而没有提供一些更为底层的特征查询.比如,你用OpenCL的设备查询API只能获取最 ...

  10. 数据分析 - Excel 函数, 技巧, 分析工具

    数据分析工具使用场景 函数 分类 文本清洗函数 FIND - 查找 find 函数查询指定位置的某字符的的位置 快捷键 : 选中后双击右下角的 + 可以快速生成当前一列结果 FIND("查询 ...