Vue: components inside component

Question

What is a good way to build system of nested components with a small advancing of rendering? See desired code with main question ('HOW TO...') below:

tab.vue (child component)

<template>
    <slot></slot>
</template>

<script>
    export default {
        name: 'Tab',
        props: ['title']
    }
</script>

tabs.vue (container component)

<template>
    <div class="tabs-switchers">
        <b
            v-for="(o, i) in items"
            :key="`tab-button-${i}`"
        >
            {{ o.componentInstance.props.title }}
        </b>
    </div>
    <div class="tabs-contents">
        <div class="tabs-contents-item"
            v-for="(o, i) in items"
            :key="`tab-item-${i}`"
        >
            <!-- HOW TO RENDER TAB CONTENT HERE??? -->
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Tabs',
        computed () {
            items () {
                return this.$slots.default
            }
        }
    }
</script>

page.vue (component with example of using)

<template>
    <tabs>
        <tab title="tab 1"><p>Tab #1 content</p></tab>
        <tab title="tab 2"><p>Tab #2 content</p></tab>
        <tab title="tab 3"><p>Tab #3 content</p></tab>
    </tabs>
</template>

Thank you but no. The diff is I need to build additional DOM elems based on children. It looks like I need to override render() method instead of using TEMPLATE tag in .vue file. — Serge
– Serge, Commented Feb 1, 2019 at 9:15

tony19 · Accepted Answer · 2022-07-15 02:17:35Z

Key of solution is to use component's render function ( https://v2.vuejs.org/v2/guide/render-function.html ) to implement some customization. Example:

export default {
  name: 'Tabs',
  render: function (createElement) {
    const buttons = []
    const tabs = []
    const children = this.$slots.default // shortcut

    for (let i = 0; i < children.length; i++) {
      buttons.push(createElement(
        'button',
        children[i].componentOptions.propsData.title
      ))
      tabs.push(createElement(
        'div',
        {
          class: i === 0 ? 'active tab' : 'tab',
          attrs: {
            id: `tab-${i}`
          }
        },
        children[i].componentOptions.children
      ))
    }
    const buttonsContainer = createElement('div', { class: 'buttons' }, buttons)
    const tabsContainer = createElement('div', tabs)

    const root = createElement('div', { class: 'tabs' }, [buttonsContainer, tabsContainer])
    return root
  }
}

Im not sure about VNode API (children[i].componentOptions.propsData.title -- is it right approach?) but it works and It is right way to solve Im sure.

Cheers!

Yom T. · Accepted Answer · 2019-02-01 09:34:39Z

0

You should not need v-for for rendering the slot contents.

Vue.component('Tabs', {
  template: `
    <div class="tab-container">
      <slot></slot>
    </div>
  `
})

Vue.component('Tab', {
  template: `
    <div class="tab">
      <strong>{{title}}</strong>
      <slot></slot>
    </div>
  `,
  
  props: ['title']
})

new Vue().$mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <tabs>
    <tab title="tab 1">
      <p>Tab #1 content</p>
    </tab>
    <tab title="tab 2">
      <p>Tab #2 content</p>
    </tab>
    <tab title="tab 3">
      <p>Tab #3 content</p>
    </tab>
  </tabs>
</div>

edited Feb 1, 2019 at 9:34

answered Feb 1, 2019 at 9:18

Yom T.

9,1982 gold badges35 silver badges52 bronze badges

3 Comments

Serge Over a year ago

Nah. Look at tabs.vue to realize what kind of html I needed. <div> <div></div> <div></div> </div>

Yom T. Over a year ago

Have a look at named slots.

Serge Over a year ago

Maybe, but note that all my children components use the same name. What the way to render em in this case? <slot name="tab"> doesn't work in this case.

Collectives™ on Stack Overflow

Vue: components inside component

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related