Question

我有以下情况：

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

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

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

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

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

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

有人有想法吗？谢谢！

Answer 1

Slots是执行此操作的惯用方法。

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

＆＃13;

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"
})

＆＃13;

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

＆＃13;

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

＆＃13;

组件内的Vuejs组件

1 个答案: