Vue动态组件

父组件

<template>
    <div id="app">
        <button @click="tabComponent('Foo')">Foo</button>
        <button @click="tabComponent('Bar')">Bar</button>
        <keep-alive>
            <component v-bind:is="currentTabComponent"></component>
        </keep-alive>
    </div>
</template>

<script>
    import Foo from './components/Foo.vue'
    import Bar from './components/Bar.vue'

    export default {
        name: 'app',
        components: {
            Foo,
            Bar
        },
        data(){
            return{
                currentTabComponent:'Foo'
            }
        },
        methods:{
            tabComponent(val){
                this.currentTabComponent = val
            }
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

Foo组件

<template>
    <div>
        <br>
        <input type="text" name="" id="" value="" />
    </div>
</template>

<script>
</script>

<style>
</style>

Bar组件

<template>
    <div>
        <br>
        <input type="text" name="" id="" value="" />
    </div>
</template>

<script>
</script>

<style>
</style>

效果

image.png