vue Dynamic Component Realizes Tab Switching Effect

This article example for everyone to share the vue dynamic components to achieve tab switching specific code, for your reference, the specific content is as follows

Navigation buttons:

<div class="tab-title"> 
   <p @click="a='tab1'"><router-link to='/collectnewcars'> New car </router-link><em></em></p>
   <p @click="a='tab2'"><router-link to='/collectusedcars'>2 Handcart </router-link><em></em></p>
   <p @click="a='tab3'"><router-link to='/collectproducts'> Car products </router-link></p>
  </div>

<div class="tabs">
 <component is:="current"></component>
</div>

Write three sub-components as follows

<tab1></tab1>
<tab2></tab2>
<tab3></tab3>

These three sub-components are introduced into js with local components

// Inside the data 
data (){
 return {
  a:'tab1'  // Default display tab1 Subcomponent 
 }
}
components:{
 'tab1':tab1,
 'tab2':tab2,
 'tab3':tab3
}

If you want to transfer data from the parent component to these word components, it is the same reason as the ordinary parent component-"child component" to transfer data, but if you bind the attribute once in this component, you can receive data in each child component, for example:

<component :is="current" :clients-data="client" :refresh-data="getClient" :user-type-data="userTypes"></component>

After defining props: [] in the child component, you can receive the method and data from the parent component.