how to create nesting Components in Vue.js

Question

I have created one demo for creating nesting component in vue.js.

but it is not working.

See below code...

Vue.component('component-a', {
  template: '<div><span>Hi</span><slot></slot></div>',
  components: {
    'component-b': {
      template: '<div>Hello</div>'
    }
  }
});

new Vue({
  el: '#app'
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
<component-a>
  <component-b></component-b>
  </component-a>
  </div>

But component-b is not rendering.

Can anyone tell me what I am doing wrong?

tony19 · Accepted Answer · 2022-07-16 01:51:17Z

1

You declare component-b in component-a. Local registering of components make them only accessible withing the components they are registered (declared), not globally, not even to their children.

And, in your code, component-b is being used by the root component, not by component-a. component-a's template is:

<div><span>Hi</span><slot></slot></div>

There's no use of component-b there. With:

new Vue({
  el: '#app'
});

<div id="app">
  <component-a>
    <component-b></component-b>
  </component-a>
</div>

You do are using component-b in the root's template. But it was not registered nowhere the root component can see.

You have some alternatives.

Move the registration to the root, where it is used:

Vue.component('component-a', {
  template: '<div><span>Hi</span><slot></slot></div>'
});

new Vue({
  el: '#app',
  components: {
    'component-b': {
      template: '<div>Hello</div>'
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <component-a>
    <component-b></component-b>
  </component-a>
</div>

Register it globally, like `component-a`

Vue.component('component-a', {
  template: '<div><span>Hi</span><slot></slot></div>',
});
Vue.component('component-b', {
  template: '<div>Hello</div>'
});

new Vue({
  el: '#app'
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <component-a>
    <component-b></component-b>
  </component-a>
</div>

Or use it inside `component-a` instead of the root and move the slot (changes semantics)

Vue.component('component-a', {
  template: '<div><span>Hi</span><component-b><slot></slot></component-b></div>',
  components: {
    'component-b': {
      template: '<div><slot></slot></div>'
    }
  }
});

new Vue({
  el: '#app'
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <component-a>
    <div>Hello</div>
  </component-a>
</div>

edited Jul 16, 2022 at 1:51

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 2, 2018 at 18:24

acdcjunior

136k37 gold badges340 silver badges312 bronze badges

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

2 Comments

mahesh shah Over a year ago

One more question is that can I add some restriction in registration of component-b that it must be children of component-a? like: Vue.component('component-b', { template: '<div>Hello</div>', parent: 'component-a' });

acdcjunior Over a year ago

Hm... unfortunatelly, no, Vue still doesn't support that. The closest it gets to that is registering it locally, but, as we found out, If we do that, we can't use component-b in the root, not even if it is inside a <slot>...

Thomas Brd · Accepted Answer · 2018-04-02 17:35:35Z

0

You need to register component-a and component-b to your Vue instance if you want to call them globally.

The local instanciation of component-b (in component-a) is never called in the component-a's template.

So do something like this, it will solve your problem:

const app = new Vue({
    el: '#app'
});

Vue.component({
    'component-a': {
         template: '<div><span>Hi</span><slot></slot></div>',
    },
    'component-b': {
        template: '<div>Hello</div>',
    }
});

answered Apr 2, 2018 at 17:35

Thomas Brd

1,2739 silver badges11 bronze badges

Collectives™ on Stack Overflow

how to create nesting Components in Vue.js

2 Answers 2

Move the registration to the root, where it is used:

Register it globally, like `component-a`

Or use it inside `component-a` instead of the root and move the slot (changes semantics)

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Move the registration to the root, where it is used:

Register it globally, like component-a

Or use it inside component-a instead of the root and move the slot (changes semantics)

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Register it globally, like `component-a`

Or use it inside `component-a` instead of the root and move the slot (changes semantics)