vue 动态组件名_vue-动态组件

动态组件 keep-alive

在实现切换效果时，你会想保持在目标位置的状态，就是你在a选项看到第8行，切换到b选项后在切换到a选项里面还在第8行的位置。

(1)创建两个组件

home.vue

<template>
  <div> 
    Home
  </div>
 </template>
<script>
export default {
  name:"Home"
}
</script>

news.vue

<template>
  <div> 
    News:{{ msg }}
    <button @clack="updateMsg">改变</button>
  </div>
 </template>
<script>
export default {
  name:"News",
  data(){
    return{
      msg:"我是初始化值"
    }
  },
  methods:{
    updateMsg(){
      this.msg = "我是改变了的值"
    }
  }
}
</script>
<style>
</style>

（2）主页面引入home.vue 和 news.vue

<template>
  <div> 
    App
     <component :is="currentComponent"></component>
     <button @click="chengeView">切换视图</button>
  </div>
 </template>
<script>
import Home from './home'
import News from './news'
export default {
  name:"App",
  data(){
    return{
    //默认值显示Home
      currentComponent:Home ,
      //定一个默认值进行取反
      flag:false
    }
  },
  compinents:{
    Home,
    News 
  },
  methods:{
    chengeView(){
      if(this.flag){
        this.currentComponent = Home
        this.flag = false
      }else{
        this.currentComponent = News 
        this.flag = true
      }
    }
  }
}
</script>
<style>
</style>

功能创建好后

1.点击切换视图到News

2.点击改变

3.到了我是改变了的值，在点击切换视图

4.到home，在点击切换视图

5.这时候发现到了我是初始化页面，不会回到我是改变了的值页面

这样会增加性能消耗，实现缓存效果，在加载组件的位置增加keep-alive，这样就不会增加性能的消耗，这就是动态组件keep-alive的作用。keep-alive缓存操作不仅可以用在component上，还可以用于路由上。

<template>
  <div> 
    App
    <keep-alive>
       <component :is="currentComponent"></component>
    </keep-alive>
    <button @click="chengeView">切换视图</button>
  </div>
 </template>
<script>
import Home from './home'
import News from './news'
export default {
  name:"App",
  data(){
    return{
    //默认值显示Home
      currentComponent:Home ,
      //定一个默认值进行取反
      flag:false
    }
  },
  compinents:{
    Home,
    News 
  },
  methods:{
    chengeView(){
      if(this.flag){
        this.currentComponent = Home
        this.flag = false
      }else{
        this.currentComponent = News 
        this.flag = true
      }
    }
  }
}
</script>
<style>
</style>