vue动态组件is/keep-alive

责编:menVScode 2018-01-29 0:37 阅读(1024)

        1、通过动态绑定 is 属性来实现动态组件。

<template>
  <div id="app">
    <p :is="currentView">eewqewqe</p>
    <button @click="toggleComp">切换组件</button>
  </div>
</template>

<script>
import Vue from 'vue'
import compA from '@/components/a'
import compB from '@/components/b'
export default {
  name: 'App',
  components:{compA,compB},
  data(){
    return { currentView:'comp-a' }
  },
  methods:{
    toggleComp(){
      if(this.currentView==='comp-a'){
        this.currentView='comp-b'
      }else{
        this.currentView='comp-a'
      }
    }
  }
}
</script>

        2、动态组件支持keep-alive内置标签

        作用:缓存切换时的组件。假如从a组件切换到b组件,就会把a组件缓存起来,等到下次的时候加载a组件可以提高效率。

<template>
  <div id="app">
    <keep-alive>
      <p :is="currentView"></p>
    </keep-alive>
    <button @click="toggleComp">切换组件</button>
  </div>
</template>

        3、动态组件切换支持transition过渡

<tranistion name="fade" mode="out-in">
  <div :is="currentView"><>
</transition>
标签: is vue keep-alive
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码