Обернуть 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

Вот пример песочницы: ссылка .

Попробуйте использовать slots для достижения того же.

// App.vue (Parent component)
<template>
  <div id="app">
    <HelloWorld msg="Hello Vue in CodeSandbox!"> 
      <random slot="random"/> // Component 2 being called inside Component 1
    </HelloWorld>
  </div>
</template>
<script>
import random from "./components/random";
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld,
    random
  }
};
</script>


// HelloWorld.vue (Component 1)
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <slot name="random"></slot>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

// random.vue (Component 2)
<template>
  <div>I am random</div>
</template>