CODEWITHSUNDEEP
htmlvue.js
luis
luis

Reputation: 151

¿How to use or add two or more components within a tab section?

I have this tab system, which works perfectly for me. I am learning VueJs. I have a concern
regarding components and/or templates. My concern is:

Using any tab windows as an example,how do I add two components inside a tab,I mean
one of its windows or sections.

Any help,please?

This is my codepen:

https://codepen.io/luis-tavarez/pen/dyOeRwO

Upvotes: 0

Views: 170

Answers (1)

Mike
Mike

Reputation: 805

It would be worth checking out Vue's Single File Components.

Using the layout you already have in place, you could add additional components to a tab by doing the following. Let's assume the new component will be named Custom.

  1. Add an additional router-view to your HTML:
<section class="mainBody">
  <router-view name="header"><button>asaaasas</button></router-view>
  <router-view name="content"></router-view>
  <router-view name="custom"></router-view>
</section>
  1. Add a new template block to Home, for example above line 43 where you've described the Header template:
const Custom = {
  template: `
    <section class="content">
      <div>
        <h1>Here is your new custom component</h1>
      </div>
    </secion>
  `
};
  1. Update Components in your Routes description:
{
  path: "/three",
  name: 'three',
  components: {
    header: Header,
    content: contentThree,
    custom: Custom
  },
  props: {
    header: true,
    content: false
  }
},

And here it is rendered: enter image description here

Upvotes: 1

Related Questions