〖Vue〗必备小知识-Vue 动态组件小实练-Tab 选项卡

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

Vue 必备小知识之动态组件

Vue 的 2 个内置组件:

<component :is=”组件的名字”></component> :is 指定要显示的组件名字
<keep-alive></keep-alive> 对内容进行缓存

1. 动态组件

1.1 动态组件效果如下图:

动态组件1

1.2 实现代码:

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.6/vue.js"></script>
</head>
<body>
  <div id="box">
    <!-- keep-alive 对内容进行缓存 -->
    <keep-alive>
      <!-- component 动态组件 :is 指定 -->
      <component :is="curComponentName"></component>
    </keep-alive>
    <button @click="curComponentName='com1'">组件一</button>
    <button @click="curComponentName='com2'">组件二</button>
  </div>
  <script>
    var com1 = {
      template: "<div>com1 组件一 <input type='text'></div>"
    }
    var com2 = {
      template: "<div>com2 组件二 <input type='text'></div>"
    }

    var vm = new Vue({
      el: "#box",
      data: {
        curComponentName: 'com1'
      },
      components: {
        com1,
        com2
      }
    })
  </script>
</body>
复制代码

2. 小实战: Tab 选项卡

也是用到的动态组件来实现的: <component :is="componentName">

选项卡简单效果图,

功能已经写完整了, 可继续美化样式. 这里点击可切换界面 tab, 这里没做动图演示, 两个效果图由点击得来, 供大家臆想..~

<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 的内容', 'TypeScript 的内容', 'CSS 的内容']"></tab>
    <tab :titles="['一教室内', '一教室内']" :contents="['一教室内有30人', '二教室内有20人']"></tab>
    <tab :titles="['aaa', 'bbb']" :contents="['aaaaaaaaa', 'bbbbbbbb']"></tab>
  </div>

  <script>
    var tab = {
      props: ['titles', 'contents'],
      data() {
        return {
          components: [], // 存储 tab 选项卡内容的组件数组
          curIndex: 0 // 默认选择第一项
        }
      },
      created() {
        this.contents.forEach(item => {
          // 把字符串数组中的每一项变为组件存储到 components 数组中
          this.components.push({ template: `<p>${item}</p>`})
        })
      },
      template: `
        <div class="clear">
          <ul class="bt">
            <!-- 选中的项目有一个醒目的样式 -->
            <li v-for="(item, index) in titles" @click="curIndex=index" :class="{'red': curIndex === index }">
              {{ item }}
            </li>
            <div>
              <!-- 动态组件 -->
              <component :is="components[curIndex]"></component>
            </div>
          </ul>
        </div>
      `
    }
    new Vue({
      el: "#box",
      components: {
        tab
      }
    })
  </script>
</body>
复制代码

总结

这里用到了 Vue的内置组件<keep-alive>/ <component :is='要显示的组件名'></component>