将 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>

  <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>