Vuejs component inside component

Question

I have the following situation:

My page consists of several components, which all need to be shown inside some sort of modal / overlay (which I've called 'panel'). So I've made a Panel component which contains all the functionality of the panel (close, resize, move etc). Now I want to load 3-4 different components inside this panel. How would I go and do that?

I was hoping to be able to do something like this:

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

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

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

But that doesn't work. So I was thinking I should somehow pass my custom components to my panel components, but I couldn't figure out how to do so..

Anyone have an idea? Thanks!

tony19 · Accepted Answer · 2022-07-15 20:53:27Z

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/[email protected]/dist/vue.js"></script>

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

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

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

edited Jul 15, 2022 at 20:53

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 20, 2017 at 18:01

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs component inside component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related