组件内的Vuejs组件

Question

我有以下情况:

我的页面由几个组件组成,这些组件都需要在某种模态/叠加层中显示(我称之为"面板").所以我制作了一个Panel组件,其中包含了面板的所有功能(关闭,调整大小,移动等).现在我想在这个面板中加载3-4个不同的组件.我该怎么做呢？

我希望能够做到这样的事情:

<Panel>
    <Component1></Component1>
</Panel>

<Panel>
    <Component2></Component2>
</Panel>

<Panel>
    <Component3></Component3>
</Panel>

但这不起作用.所以我想我应该以某种方式将我的自定义组件传递给我的面板组件,但我无法弄清楚如何这样做..

有人有想法吗？谢谢!

Answer 1

插槽是执行此操作的惯用方法.

Vue.component("Panel", {
  template: `<div><slot></slot></div>`
})

console.clear()

Vue.component("Panel",{
  template:`
    <div class="panel">
      <h2>I'm a Panel</h2>
      <slot></slot>
    </div>`
})

Vue.component("Component1",{
  template:`<h3>Im Component1</h3>`
})
Vue.component("Component2",{
  template:`<h3>Im Component2</h3>`
})
Vue.component("Component3",{
  template:`<h3>Im Component3</h3>`
})

new Vue({
 el:"#app"
})

.panel {
 border: 1px solid black;
 margin: 5px;
}

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>

<div id="app">
  <Panel>
      <Component1></Component1>
  </Panel>

  <Panel>
      <Component2></Component2>
  </Panel>

  <Panel>
      <Component3></Component3>
  </Panel>
</div>