CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Modelesq
Modelesq

Reputation: 5402

Using Vue slot to render component within base component

I'm trying to create a re-usable base modal component and make use of slots to provide the modal content... It creates the application and modal. On button click the modal displays, but without the content. How can I get my content to display within the content specified slot? Am I using slot's incorrectly?

Here's a fiddle to help illustrate my problem : https://jsfiddle.net/70yyx8z2/19/

// register base modal component
Vue.component('modal', {
  template: '#modal-template'
})

// register content component for modal
Vue.component('modal-content', {
  template: '#modal-content'
})

// start app
new Vue({
  el: '#app',
  data: {
    showModal: false
  }
})


<modal v-if="showModal" @close="showModal = false">
  <h3 slot="header">Header here</h3>
  <!--
    How can I use slot to render the modal content component?
  -->
  <modal-content></modal-content>
</modal>

Upvotes: 1

Views: 1413

Answers (2)

Justin MacArthur
Justin MacArthur

Reputation: 4050

JsFiddle Working Example

You can't specify a slot name inside the component as it won't be mounted before the slot replacement takes place. Instead you can assign the component to the slot

<!-- modal content component -->
<script type="text/x-template" id="modal-content">
  <form>
    <h2>This should show...</h2>
    <input type="text" placeholder="user name" />
  </form>
</script>

<!-- app -->
<div id="app">
  <button id="show-modal" @click="showModal = true">Show Modal</button>
  <!-- use the modal component, pass in the prop -->
  <modal v-if="showModal" @close="showModal = false">
    <h3 slot="header">Header here</h3>
    <!--
      How can I use slot to render the modal content component?
    -->
    <modal-content slot="body"></modal-content>
  </modal>
</div>

EDIT: Fixed a small bit of nomenclature related issue as noticed by @thanksd

Upvotes: 2

Bert
Bert

Reputation: 82459

Technically all you need to do is this.

<modal-content slot="body"></modal-content>

You probably want to remove the modal-container from the modal-content component.

Here is your fiddle updated.

Upvotes: 1

Related Questions