[Vuejs]-Vuejs component inside component

by

6👍

Slots are the idiomatic way to do this.

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

Leave a comment