将 Vue 组件包装到另一个 Vue 组件中

Question

我有一个侧边栏组件，我想使用两次，但其中包含不同的其他组件。

我真的很想这样工作：

<template>

  <Sidebar class="left-0">

    <ExampleComponentA/>

  </Sidebar>

  <Content/>

  <Sidebar class="right-0">

    <ExampleComponentB/>

  </Sidebar>

</template>

Vue有可能还是我真的需要一个SidebarLeft和一个SidebarRight组件？

<template>

  <SidebarLeft class="left-0"/> <!-- <ExampleComponentA/> is in this Component -->

  <Content/>

  <SidebarRight class="right-0"/> <!-- <ExampleComponentB/> is in this Component -->

</template>

我为什么要那样做？

好吧，我的侧边栏的设置是相同的，只是content不同。所以我不需要复制洞边栏。

Answer 1

这是一个沙盒示例：link。尝试使用slots来达到同样的效果。// App.vue (Parent component)<template>&nbsp; <div id="app">&nbsp; &nbsp; <HelloWorld msg="Hello Vue in CodeSandbox!">&nbsp;&nbsp; &nbsp; &nbsp; <random slot="random"/> // Component 2 being called inside Component 1&nbsp; &nbsp; </HelloWorld>&nbsp; </div></template><script>import random from "./components/random";import HelloWorld from "./components/HelloWorld";export default {&nbsp; name: "App",&nbsp; components: {&nbsp; &nbsp; HelloWorld,&nbsp; &nbsp; random&nbsp; }};</script>// HelloWorld.vue (Component 1)<template>&nbsp; <div class="hello">&nbsp; &nbsp; <h1>{{ msg }}</h1>&nbsp; &nbsp; <slot name="random"></slot>&nbsp; </div></template><script>export default {&nbsp; name: "HelloWorld",&nbsp; props: {&nbsp; &nbsp; msg: String&nbsp; }};</script>// random.vue (Component 2)<template>&nbsp; <div>I am random</div></template>