使用v-bind:is切换组件

使用v-bind:is切换组件

<template>
  <div>
      <!--切换组件的方法 -->
      <keep-alive>   //切换组件的时候把切换的组件做一个缓存处理,而不是销毁处理,提高性能
            <component :is="cmp"/>
      </keep-alive>
      <button @click="toggleCmp">点击切换组件</button>
      <!-- 平常我们使用的方法为 -->
      <LoginChildren v-if="cmp==='LoginChildren'" />
        <RegisterChildren v-else/>
        </div>
</template>

<script>
import LoginChildren from './components/login'
import RegisterChildren from './components/register'
export default {
    data () {
        return {
            cmp:'LoginChildren'
        }
    },
    components:{
    LoginChildren,RegisterChildren
    },
    methods: {
        toggleCmp(){
            this.cmp='RegisterChildren'
        }
    }

}
</script>