Vue学习（动态组件、组件路由缓存keepalive）-学习笔记

Vue学习（动态组件、组件路由缓存keepalive）-学习笔记

动态组件

<template>
<div>
  <button @click="flag='testA'">testA</button>
  <button @click="flag='testB'">testB</button>
  <button @click="flag='testC'">testC</button>
  <!-- <testA  v-if="flag=='testA'"/>
  <testB v-if="flag=='testB'"/> -->
  <!-- 动态组件  flag的值与组件的名称相匹配-->
  <component :is="flag"></component>
</div>
</template>

<script>
import testA from './testA.vue'
import testB from './testB.vue'

export default {
  name:'',
  data(){
    return{
      flag:'testA'
    }
  },
  components:{
    testA,
    testB
  }
}
</script>

组件路由缓存keepalive

<template>
<div>
  <button @click="flag='testA'" :class="flag=='testA'?'active':''">testA</button>
  <button @click="flag='testB'"  :class="flag=='testB'?'active':''">testB</button>
  <button @click="flag='testC'"  :class="flag=='testC'?'active':''">testC</button>
  <!-- <testA  v-if="flag=='testA'"/>
  <testB v-if="flag=='testB'"/> -->
  <!-- 动态组件  flag的值与组件的名称相匹配-->
  <!-- keep-alive  抽象组件  用于对组件进行缓存 -->
  <!-- include:只有匹配的组件才会缓存 （可写正则表达式） -->
  <!-- exclude:任何组件不会缓存 -->
  <keep-alive include="testA">
     <component :is="flag"></component>
  </keep-alive>

  <!-- 组件testA、testC缓存 -->
  <!-- <keep-alive include="testA,testC">
     <component :is="flag"></component>
  </keep-alive>-->

  <!-- 除了组件testA、testC缓存 -->
  <!-- <keep-alive exclude="testA,testC">
     <component :is="flag"></component>
  </keep-alive>-->
</div> 
  
</template>

<script>
import testA from './testA.vue'
import testB from './testB.vue'

export default {
  name:'',
  data(){
    return{
      flag:'testA'
    }
  },
  components:{
    testA,
    testB
  }
}
</script>

<style scoped>
@import '../../assets/css/table.css';
.active {
  background:#f00;
}
</style>

<template>
<div>
  testA组件：{{title}}
</div>
</template>

<script>
export default {
  name:'',
  data(){
    return{
      title:Math.random()
    }
  }
}
</script>

<template>
<div>
  testB组件：
  <input type="text" v-model="title" />
</div>
</template>

<script>
export default {
  name:'',
  data(){
    return{
      title:Math.random()
    }
  }
}
</script>