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

墨蓝 2022-10-04 15:00 153阅读 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>
      
      
      <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>
      
      
      
      
      
      <keep-alive include="testA">
         <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>