1、子组件
<template>
<div>
<button @click="sendData">发送数据</button>
</div>
</template>
<script>
export default {
methods: {
sendData() {
// 触发自定义事件 'data-updated',并传递数据
this.$emit('data-updated', resultData);
}
}
}
</script>
2、父组件
<template>
<div>
<ChildComponent @data-updated="handleDataUpdated" />
<div>接收到的数据: {
{ receivedData }}</div>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
receivedData: {}
};
},
methods: {
handleDataUpdated(data) {
// 处理子组件传递的数据
this.receivedData = data;
}
}
}
</script>
3、使用场景
子组件发送请求,拿到的数据需要在父组件上展示, this.$emit('data-updated', resultData);这块就可以是拿到请求,传值给在父组件注册的子组件上 @data-updated="handleDataUpdated"也就是这个,data就是子组件里面传过来的值。