CODEWITHSUNDEEP
vue.jsvue-component
Cananau Cristian
Cananau Cristian

Reputation: 456

Vue.js - named slots

I have a beginner question about named slots. In my example, I want to display just the content for the first slot - but it's not working unless I use <slot></slot> without name="first". What's wrong with my example?

Vue.component('user-name', {
  props: ['name'],
  template: `
  	     <p slot="first">Hi {{ name }}</p>
            `
});

Vue.component('user-nickname', {
  props: ['name'],
  template: `
             <p slot="secont">Byee {{ name }}</p>
            `
});

Vue.component('user-information', {
  template: `<div class="user-information">
	         <slot name="first"></slot>								
              </div>
             `,
});

new Vue({
  el: "#app"
});
body{
  width:700px;
  margin:0 auto;
  text-align:center;
  color: blue;
  
}

.user-information {
  background: red;
  width: 700px;
  height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    <user-information>
      <user-name name="Foo"></user-name>
      <user-nickname name="Boo"></user-nickname>
    </user-information>
</div>

Upvotes: 1

Views: 769

Answers (1)

depperm
depperm

Reputation: 10746

remove slot="..whatever.." from your components. Then add a second named slot to user-information. Finally in your main reference the slot as the parent of your sub-components

<user-information>
    <template v-slot:first>
        <user-name name="Foo"></user-name>
    </template>
    <template v-slot:second>
        <user-nickname name="Boo"></user-nickname>
    </template>
</user-information>

Upvotes: 2

Related Questions