vue2传参

在Vue 2中，事件传参是一种常用的在组件间或父子组件间通信的方式。当你在模板中监听一个事件时，有时候需要向事件处理函数传递一些参数。Vue 2 提供了几种方式来处理事件传参。

1. 直接在模板中绑定参数

你可以在模板中直接通过 $event 关键字获取到原生DOM事件对象，并通过其他参数将自定义的数据传递给事件处理函数。

html复制代码

	<!-- 子组件 -->
	<template>
	<button @click="emitEvent('自定义参数')">点击我</button>
	</template>
	<script>
	export default {
	methods: {
	emitEvent(param) {
	this.$emit('custom-event', param);
	}
	}
	}
	</script>
	<!-- 父组件 -->
	<template>
	<child-component @custom-event="handleEvent($event, '额外参数')"></child-component>
	</template>
	<script>
	export default {
	methods: {
	handleEvent(eventParam, extraParam) {
	console.log(eventParam); // '自定义参数'
	console.log(extraParam); // '额外参数'
	}
	}
	}
	</script>

注意：上面的例子中，$event 关键字在Vue 2.4.0+中可用，但在Vue 3中已被废弃，因为你可以直接在事件监听器中访问到事件对象。

2. 在方法中使用箭头函数（不推荐）

虽然可以在模板中使用箭头函数来直接传递参数，但这种方式会改变this的上下文，导致在箭头函数内部无法访问到Vue实例的this，因此通常不推荐这样做。

3. 在事件处理函数中解构参数

如果事件监听函数只需要事件对象中的某些属性，你可以直接在函数参数中解构这些属性。

html复制代码

	<!-- 父组件 -->
	<template>
	<child-component @custom-event="handleEvent"></child-component>
	</template>
	<script>
	export default {
	methods: {
	handleEvent({ detail: customParam }) {
	console.log(customParam); // 假设子组件发射事件时使用了`this.$emit('custom-event', { detail: '自定义参数' })`
	}
	}
	}
	</script>

4. 结合使用参数和$event

如果既需要传递自定义参数，又需要访问到事件对象，可以通过在事件处理函数中显式地传递$event。

html复制代码

	<!-- 父组件 -->
	<template>
	<child-component @custom-event="handleEvent('自定义参数', $event)"></child-component>
	</template>
	<script>
	export default {
	methods: {
	handleEvent(customParam, event) {
	console.log(customParam); // '自定义参数'
	console.log(event); // 原生DOM事件对象
	}
	}
	}
	</script>

注意：在Vue 3中，$event作为特殊变量在模板中的使用方式有所改变，但基本的传参概念仍然适用。在Vue 3中，你可能更倾向于使用v-model、props和emit来进行组件间的通信。