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

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

墨蓝 2022-10-04 15:00 296阅读 0赞

文章目录

- Vue学习（动态组件、组件路由缓存keepalive）-学习笔记
- - 动态组件
  - 组件路由缓存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>