Vue中$emit的用法

一句话理解：

子组件可以使用$emit触发父组件的自定义监听

例如

子组件 item.vue

<template>
    <button @click="$emit('test', 5)">
          触发父组件的test监听, 参数为5
    </button>
</template>

<script>
// ...
</script>　

父组件 xxx.vue

<template>
	<div>
		<item @test="log"/>    //监听test
	</div>
</template>


<script>
export default {
    
    // ...

	methods: {
		log(arg) {
			console.log(arg)
		}
	}

    // ...
}
</script>

Vue官方给出的 Todo App 例子中就有使用到 $emit ：Simple Todo App with Vue - CodeSandbox

如果需要传递多个参数，可以利用对象

<template>
    <button @click="$emit('test', {a: 1, b: true})">
          触发父组件的test监听
    </button>
</template>

<script>
// ...
</script>　

等同于

<template>
    <button @click="send()">
          触发父组件的test监听
    </button>
</template>

<script>
export default {

    // ...

    methods:{
        send() {
            let data = {
                a: 1,
                b: true
            }
            this.$emit('test', data)
        }
    }

    // ...

}
</script>　

也可以不传参

<template>
    <button @click="$emit('test')">
          触发父组件的test监听
    </button>
</template>

<script>
// ...
</script>