Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Dynamic components for Vue

Vue has two built-in components:

  • <component :is= "Component name" ></component> :isSpecifies the name of the component to display
  • <keep-alive></keep-alive>Cache the content

1. Dynamic components

1.1 Dynamic component effect is shown as follows:

1.2 Implementation code:

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.6/vue.js"></script>
</head>
<body>
  <div id="box">
    <! -- keep-alive cache contents -->
    <keep-alive>
      <! -- Component Dynamic component :is specified -->
      <component :is="curComponentName"></component>
    </keep-alive>
    <button @click="curComponentName='com1'">The component a</button>
    <button @click="curComponentName='com2'">Component 2</button>
  </div>
  <script>
    var com1 = {
      template: 
       

        com1 
        
       

    }
    var com2 = {
      template: 
       

        com2 
        
       

    }

    var vm = new Vue({
      el: "#box".data: {
        curComponentName: 'com1'
      },
      components: {
        com1,
        com2
      }
    })
  </script>
</body>
Copy the code

2. The Tab Tab

< Component :is=”componentName”>

TAB simple renderings,

Functionality has been written, you can continue to beautify the style. Click here to switch the interface TAB, there is no GIF demonstration here, two effect pictures are obtained by clicking, for everyone to imagine.. ~

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.6/vue.js"></script>
  <style>
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .bt li {
      float: left;
      width: 80px;
      text-align: center;
      padding: 5px 10px;
    }
    .clear {
      clear: both;
    }
    .content {
      border: 1px solid # 000;
    }
    .red {
      color: red
    }
  </style>
</head>
<body>
  <div id="box">
    <tab :titles="['JavaScript', 'TypeScript', 'CSS']" :contents="['JavaScript content ', 'TypeScript content ', 'CSS content ']"></tab>
    <tab :titles="[' In one classroom ', 'in one classroom ']" :contents="[' There are 30 people in room 1 ', 'there are 20 people in room 2 ']"></tab>
    <tab :titles="['aaa', 'bbb']" :contents="['aaaaaaaaa', 'bbbbbbbb']"></tab>
  </div>

  <script>Var TAB = {props: ['titles', 'contents'], data() {return {components: [], 0 // The first option is selected by default}}, Created () {this. Contents. ForEach (item = > {/ / store each item in the string array into components to components this.com ponents in the array. The push ({template: `<p>${item}</p>`})
        })
      },
      template: `
        <div class="clear">
          <ul class="bt">
            <! -- The selected item has a bold style -->
            <li v-for="(item, index) in titles" @click="curIndex=index" :class="{'red': curIndex === index }">
              {{ item }}
            </li>
            <div>
              <! -- Dynamic Component -->
              <component :is="components[curIndex]"></component>
            </div>
          </ul>
        </div>
      `
    }
    new Vue({
      el: "#box",
      components: {
        tab
      }
    })
  </script>
</body>
Copy the code

conclusion


/