[vue]动态组件&keep-alive

动态组件

上面点击可进入官网链接

自己看了官网的例子，不太理解 ，然后搜罗了一下，自己参考写了一下

<template>
  <div>
    <!-- // 每一个 tab 绑定了一个点击事件，传入的参数对应着 tab 下的组件名 -->
    <div class="tabs">
      <div class="tab" :class="{'active': currentTab==='prince'}" @click="toggleTab('prince')"><a>小王子</a></div>
      <div class="tab" :class="{'active': currentTab==='rose'}" @click="toggleTab('rose')"><a>小玫瑰</a></div>
      <div class="tab" :class="{'active': currentTab==='fox'}" @click="toggleTab('fox')"><a>小狐狸</a></div>
    </div>
    <!-- // 子组件，显示不同的 tab
    // is 特性动态绑定子组件
    // keep-alive 将切换出去的组件保留在内存中 -->
    <keep-alive>
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>

<script>
import prince from 'components/dq/prince'
import rose from 'components/dq/rose'
import fox from 'components/dq/fox'

export default {
  data () {
    return {
      currentTab: 'prince'
    }
  },
  components: {
    prince,
    rose,
    fox
  },
  created () {
  },
  methods: {
    toggleTab (tab) {
      this.currentTab = tab
      // tab 为当前触发标签页的组件名
    }
  }
}
</script>

<style lang="less">
h2,p{
  text-align: center;
}
h2{
  font-weight: bold;
  font-size: 40px;
  margin: 20px;
}
.tabs{
  display: flex;
}
.tab{
  flex: 1;
  text-align: center;
  font-size: 28px; 
  height: 80px;
  line-height: 80px; 
}
.tab.active{
  color: #ff4611;
  border-bottom: 2px solid #ff4611;
}
</style>

子组件的内容，随便写就行
用了 <keep-alive>的效果就是，如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。比如子组件有input输入，切回来会保留刚输入的内容，不会重新渲染

话说小主开了一个wx号：[民间程序员]，分享H5相关知识点，H5踩坑记，H5实战案例分享等，欢迎大家关注~

博主小号-欢迎关注