国产crm_网络建站培训_宁德市古田县_seo软件优化工具软件

案例：父组件里有A组件、B组件

A组件 =》 父组件 =》B组件

AComponent.vue

<template><div @dragend="handleDragEnd">Drag Me</div>
</template><script setup lang="ts">
import { defineEmits } from "vue";// 定义发出事件
const emit = defineEmits<{(event: "drag-end", data: { event: DragEvent; someData: string }): void;
}>();const handleDragEnd = (event: DragEvent) => {// 发出事件传递数据emit("drag-end", { event, someData: "example from AComponent" });
};
</script>

父组件 ParentComponent.vue 

<template><AComponent @drag-end="handleDragEnd" /><BComponent :data="receivedData" />
</template><script setup lang="ts">
import { ref } from "vue";
import AComponent from "./AComponent.vue";
import BComponent from "./BComponent.vue";// 接收 AComponent 传递的数据
const receivedData = ref<{ event: DragEvent; someData: string } | null>(null);const handleDragEnd = (data: { event: DragEvent; someData: string }) => {receivedData.value = data; // 更新数据，传递给 BComponent
};
</script>

BComponent.vue 

<template><div><p v-if="data">Received Data: {{ data.someData }}</p><p v-else>No Data Received</p></div>
</template><script setup lang="ts">
import { defineProps } from "vue";// 定义 props
const props = defineProps<{data: { event: DragEvent; someData: string } | null;
}>();
</script>

 

代码说明：

1. AComponent.vue：

   • 使用 @dragend 监听拖拽结束事件，通过 emit 发出 drag-end 自定义事件，将数据传递给父组件。

2. ParentComponent.vue：

   • 监听 AComponent 的 drag-end 事件，处理传来的数据并存储到 receivedData。
   • 将 receivedData 通过 props 传递给 BComponent。

3. BComponent.vue：

   • 接收父组件传递的 data，如果有数据则显示内容，如果没有则提示“未接收到数据”。

 

效果：

1. 用户在 AComponent 拖拽结束后触发事件，父组件监听并更新数据。
2. BComponent 实时展示父组件传递的数据。