触发与监听事件

1

在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件(例如：在 v-on 的处理函数中)：

子组件代码

<template>
	<button @click="$emit('someEvent')">点击</button>
</template>

<script>
	export default {
		emits:['someEvent']
	}
</script>

<style>
</style>

父组件代码

<template>
	<Sub @someEvent="some"></Sub>
</template>

<script>
	import Sub from './Sub.vue'
	export default {
		components: {
			Sub,
		},
		data() {
			return {
				
			}
		},
		methods:{
			some() {
				console.log("some")
			}
		}
	}
</script>

<style>

</style>

2

$emit() 方法在组件实例上也同样以 this.$emit() 的形式可用：

父组件代码不变，子组件代码如下

<template>
	<button @click="myClick">点击</button>
</template>

<script>
	export default {
		emits:['someEvent'],
		methods:{
			myClick() {
				this.$emit("someEvent")
			}
		}
	}
</script>

<style>
</style>

3

组件的事件监听器也支持 .once 修饰符：

父组件这句改为

<template>
	<Sub @someEvent.once="some"></Sub>
</template>

这样点击效果就只会出现一次。

4

像组件与 prop 一样，事件的名字也提供了自动的格式转换。像3中的代码也可以这样写

<template>
	<Sub @some-event.once="some"></Sub>
</template>

5

和原生DOM事件不一样，组件触发的时间没有冒泡机制。你只能监听直接子组件触发的事件。平级组件或是跨越多层嵌套的组件间通信，应使用一个外部的事件总线，或是使用一个全局状态管理方案。