this.$emit 是 Vue 中的一个实例方法，用于触发当前实例上的事件。这主要用于子组件与父组件之间的通信。子组件可以使用 $emit 方法触发父组件的方法，并且可以传递参数。
解法1：
子组件：
<template>
<button @click="sendToParent">Send to Parent</button>
</template>
<script>
export default {
methods: {
sendToParent() {
this.$emit('send', 'Hello, Parent!');
}
}
}
</script>
父组件：
<template>
<div>
<ChildComponent @send="receiveFromChild" />
<p>{{ messageFromChild }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
messageFromChild: ''
}
},
methods: {
receiveFromChild(msg) {
this.messageFromChild = msg;
}
}
}
</script>
在这个例子中，当在子组件中点击按钮时，会触发 sendToParent 方法，该方法会使用 $emit 方法触发 send 事件，并传递了一个字符串 'Hello, Parent!' 给父组件。父组件监听 send 事件，并在事件触发时调用 receiveFromChild 方法，该方法将接收到的消息赋值给 messageFromChild 数据属性，然后可以在模板中显示出来。
解法2：
子组件：
<template>
<button @click="sendToParent">Send to Parent</button>
</template>
<script>
export default {
methods: {
sendToParent() {
this.$emit('send', { name: 'John', age: 30 });
}
}
}
</script>
父组件：
<template>
<div>
<ChildComponent @send="receiveFromChild" />
<p>{{ personFromChild.name }} is {{ personFromChild.age }} years old.</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
personFromChild: {}
}
},
methods: {
receiveFromChild(person) {
this.personFromChild = person;
}
}
}
</script>
在这个例子中，子组件向父组件传递了一个包含 name 和 age 属性的对象。父组件在接收到信息后，将这个对象赋值给 personFromChild 数据属性，然后可以在模板中显示出来。
注意：
$emit 方法的第一个参数是事件名，后续参数是传递给父组件的值。- 父组件通过
v-on 或 @ 来监听子组件触发的事件，并指定一个方法来处理接收到的值。