vue用slot实现一个子组件向两个父组件传递不同的div

可以使用具名插槽来实现子组件向两个父组件传递不同的 div。

首先，定义一个具名插槽，例如：

<template>
  <div>
    <slot name="left"></slot>
    <slot name="right"></slot>
  </div>
</template>

然后，在父组件中使用该子组件，通过 slot 属性来传递不同的 div：

<template>
  <div>
    <my-component>
      <div slot="left">Left Content</div>
      <div slot="right">Right Content</div>
    </my-component>
  </div>
</template>

这样，左侧的 div 内容将插入到名为 "left" 的具名插槽中，右侧的 div 内容将插入到名为 "right" 的具名插槽中。子组件中的插槽可以通过 `v-slot` 或 `#` 来获取具名插槽的内容。

例如：

<template>
  <my-component>
    <template v-slot:left>
      <div>Left Content</div>
    </template>
    <template v-slot:right>
      <div>Right Content</div>
    </template>
  </my-component>
</template>