Vue-cli and vue2.0vue-cli

Vue-cli and vue2.0vue-cli

In vue, there are three main ways to implement Tab switching: using dynamic components, using vue-router routing, and using third-party plug-ins.

Because the function completed this time is only simple switching components, and it is a little troublesome to change the address when using route switching, so dynamic component implementation is used. If it is for large-scale applications, it may be easier to use vue-router.

First, let's take a look at the final implementation. The structure is relatively simple. The three Tab labels on the top are used for switching. The content area is divided into three sub-components.

Effect Preview

Key code and analysis are as follows:

<Template> // each tab is bound with a click event, the input parameter corresponds to the component name <div class = "tabs"> <div class = "tab" @ click = "toggleTab ('Prince ') under the tab ') "> <a> </a> </div> <div class =" tab "@ click =" toggleTab ('Rose ') "> <a> xiaorose </a> </div> <div class =" tab "@ click =" toggleTab ('fox ') "> <a> Fox </a> </div> // sub-component, display different tab/is features. dynamically bind the sub-component // keep-alive to keep the switched components in the memory <prince: is = "currentTab" keep-alive> </prince> </template> <script> // introduce the sub-component import prince from '. /components/prince '; import rose from '. /components/rose '; import fox from '. /components/Fox'; export default {name: 'app', data () {return {currentTab: 'Prince '// currentTab identifies the currently triggered child component };}, components: {// declare child components prince, rose, fox}, methods: {toggleTab: function (tab) {this. currentTab = tab; // tab is the component name of the currently triggered tab }}</script>

The basic process of switching tabs using dynamic components can be summarized as follows:

• Define a main tab in the parent component for switching, bind a click event for each tab, input the sub-component name of the tab, and finally introduce and define the sub-component
• The sub-component contains the content of tabs.
• Use the is feature to dynamically switch sub-components and use kee-alive Cache

The is feature is generally used for native HTML Element Extension.

For example, the ul label can only be nested with the li label, but we want to use the custom component v-li In the ul label.

<ul>  <v-li></v-li></ul>

However, such writing is definitely not feasible, and the is feature is required.

<ul>  <li is="v-li"></li></ul>

This is why the is feature can be used to dynamically switch components.

The keep-alive command can retain the switched component in the memory and its status or avoid re-rendering.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.