子组件可以通过 $emit 触发一个事件,并将数据传递给父组件。在父组件中,我们可以在子组件的标签中使用 v-on 指令来监听这个事件。在子组件中,我们可以通过 this.$emit 触发这个事件。
父组件:htmlCopy
<template>
<div>
<child-component @customEvent="handleCustomEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
handleCustomEvent(data) {
console.log(data);
},
},
};
</script>
子组件:htmlCopy
<template>
<div>
<button @click="handleClick">Trigger Custom Event</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('customEvent', 'Hello from child!');
},
},
};
</script>