vue dynamic component realizes tab switching effect

This article shares the specific code for vue dynamic components to implement tab switching for your reference. The specific content is as follows

Navigation buttons:

&lt;div class="tab-title"&gt; 
   &lt;p @click="a='tab1'"&gt;&lt;router-link to='/collectnewcars'&gt;New car&lt;/router-link&gt;&lt;em&gt;&lt;/em&gt;&lt;/p&gt;
   &lt;p @click="a='tab2'"&gt;&lt;router-link to='/collectusedcars'&gt;Used cars&lt;/router-link&gt;&lt;em&gt;&lt;/em&gt;&lt;/p&gt;
   &lt;p @click="a='tab3'"&gt;&lt;router-link to='/collectproducts'&gt;Car Products&lt;/router-link&gt;&lt;/p&gt;
  &lt;/div&gt;

&lt;div class="tabs"&gt;
 &lt;component is:="current"&gt;&lt;/component&gt;
&lt;/div&gt;

Write 3 subcomponents as

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

Use local components to introduce these three subcomponents in js

//Inside the datadata (){
 return {
  a:'tab1'  //Default display of tab1 subcomponent }
}
components:{
 'tab1':tab1,
 'tab2':tab2,
 'tab3':tab3
}

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

Copy the codeThe code is as follows:

<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 methods and data sent from the parent component.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.