以下是一个简单的示例：
子组件
<template>
<button @click="sendMessage">向父组件发送消息</button>
</template>
<script>
export default {
methods: {
sendMessage() {
// 使用 $emit 触发自定义事件，并传递消息
this.$emit('child-event', '这是子组件发送的消息');
}
}
};
</script>
在这个例子中，子组件使用 $emit 方法触发了一个名为 child-event 的自定义事件，并传递了一条消息。
父组件
<template>
<div>
<child-component @child-event="handleChildEvent"></child-component>
<p>从子组件接收到的消息：{{ messageFromChild }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
messageFromChild: ''
};
},
methods: {
handleChildEvent(message) {
// 父组件监听子组件触发的自定义事件
console.log('从子组件接收到的消息：', message);
this.messageFromChild = message;
}
}
};
</script>
在父组件中，通过 @child-event="handleChildEvent" 监听了子组件触发的 child-event 自定义事件，并在 handleChildEvent 方法中处理接收到的消息。
通过这种方式，子组件和父组件之间可以进行简单而有效的通信。需要注意的是，自定义事件是单向的，只能由子组件向父组件传递消息，如果需要实现双向绑定，可以考虑使用 v-model 或者 sync 修饰符。
转载请注明出处：http://www.zyzy.cn/article/detail/495/Vue 3.0