vue动态组件:is/keep-alive

责编:menVScode 2017-12-14 21:36 阅读(1024)

组件引入方式:动态绑定is加载组件

<template>
    <p :is='comToRender'></p>
</template>
<script>
    import Vue from 'vue'
    import ComA from './component/a'
    export default {
    components:{ CompA },
    data(){
        return {
            comToRender:'com-a'
        }
    }
}
</script>

vue动态组件之间的信息传递:keep-alive;作用是当组件a切换到组件b,组件a就会被缓存起来。

<p :is='comToRender'></p>本身作用跟<comp-a></comp-a>是一样的。

<template>
    <keep-alive>
         <p :is='currentView'></p>
    </keep-alive>
</template>
<script>
    import Vue from 'vue'
    import ComA from './component/a'
    export default {
    components:{ CompA },
    data(){
        return {
            currentView:'com-a'
        }
    }
}
</script>

动态组件之前的transition过渡

<tranistion name="fade" mode="out-in">
  <div :is="currentView"><>
</transition>


标签: keep-alive :is vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码