vue子组件向两个父组件传递同一个div的不同模块

一个子组件向两个不同的父组件传递同一个 div 的不同模块，可以使用 Vue.js 的 props（属性）和 emit（事件）机制来实现。

首先，在子组件中定义一个 props，用于接收父组件传递的数据。例如：

props: {
  moduleData: {
    type: Object,
    default: () => ({})
  }
}

然后，在子组件中使用这个 props 来渲染 div 的内容。例如：

<template>
  <div>{{ moduleData.title }}</div>
</template>

接下来，在父组件中分别引入子组件，并使用 emit 事件来向子组件传递不同的数据。例如：

<template>
  <div>
    <child-component :moduleData="moduleData1" @updateModuleData="updateModuleData1"></child-component>
  </div>
  <div>
    <child-component :moduleData="moduleData2" @updateModuleData="updateModuleData2"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      moduleData1: {
        title: 'Module 1'
      },
      moduleData2: {
        title: 'Module 2'
      }
    }
  },
  methods: {
    updateModuleData1(data) {
      this.moduleData1 = data
    },
    updateModuleData2(data) {
      this.moduleData2 = data
    }
  }
}
</script>

在父组件中，分别定义了两个不同的 moduleData 对象，并且分别向子组件传递。在子组件中，根据父组件传递的 moduleData 来渲染 div 的内容。同时，子组件还定义了一个 updateModuleData 事件，用于向父组件传递数据。

在父组件中，分别监听子组件的 updateModuleData 事件，并更新对应的 moduleData 对象。这样，在父组件中就可以实现一个子组件向两个父组件传递同一个 div 的不同模块的效果。