vue2中的$listeners和v-model

发表于 更新于 分类于 ， 阅读次数： Changyan： 本文字数： 1.4k 阅读时长 ≈ 1 分钟
vue2中的事件监视函数$listeners和表达绑定事件v-model的使用

事件修饰符

针对dom节点的原生事件，vue支持多种修饰符以简化代码

详见：事件修饰符、按键修饰符、系统修饰符

$listeners

$listeners是vue的一个实例属性，它用于获取父组件传过来的所有事件函数

1
2
<!-- 父组件 -->
<Child @event1="handleEvent1" @event2="handleEvent2" />
1
2
// 子组件
this.$listeners; // { event1: handleEvent1, event2: handleEvent2 }

$emit和$listeners通信的异同

相同点：均可实现子组件向父组件传递消息

差异点：

  • $emit更加符合单向数据流，子组件仅发出通知，由父组件监听做出改变；而$listeners则是在子组件中直接使用了父组件的方法。
  • 调试工具可以监听到子组件$emit的事件，但无法监听到$listeners中的方法调用。
  • 由于$listeners中可以获得传递过来的方法，因此调用方法可以得到其返回值。但$emit仅仅是向父组件发出通知，无法知晓父组件处理的结果

对于上述中的第三点，可以在$emit中传递回调函数来解决

父组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
	<Child @click="handleClick" />
</template>

<script>
	import Child from "./Child";
	export default {
		components: {
			Child,
		},
		methods: {
			handleClick(data, callback) {
				console.log(data); // 得到子组件事件中的数据
				setTimeout(() => {
					callback(1); // 一段时间后，调用子组件传递的回调函数
				}, 3000);
			},
		},
	};
</script>

子组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
	<button @click="handleClick">click</button>
</template>

<script>
	export default {
		methods: {
			handleClick() {
				this.$emit("click", 123, (data) => {
					console.log(data); // data为父组件处理完成后得到的数据
				});
			},
		},
	};
</script>

v-model

v-model指令实质是一个语法糖，它是value属性和input事件的结合体

1
2
3
<input :value="data" @input="data=$event.target.value" />
<!-- 等同于 -->
<input v-model="data" />

详见：表单输入绑定