[Vue] Dynamic Vue.js Components with the component element

You can dynamically switch between components in a template by using the reserved <component> element and dynamically bind to its is attribute. By using <keep-alive> you can tell Vue to keep the component in memory.

 

Two children components:

<!-- show.vue -->

<template>
    <div>
        Show Component: <span>{{name}}</span>
    </div>
</template>
<script>
    export default{
        name: 'show-component',
        props: ['name']
    }
</script>

<!-- edit-->
<template>
    <div>
        Edit component: <input type="text" v-model="editValue"/>
    </div>
</template>
<script>
    export default{
        name: 'edit-component',
        data(){
            return{
                editValue: this.name
            }
        },
        props: ['name']
    }
</script>

 

Parent:

<template>

    <section class="container">
        <section>
            <h3>Dynamic component</h3>
            <a @click="toggle">{{toggleButton}}</a>
            <keep-alive>
                <component
                        v-bind:is="currentView"
                        v-bind:name="message"
                >
                </component>
            </keep-alive>

        </section>
    </section>
</template>

<style scoped>
.title
{
  margin: 50px 0;
}

</style>

<script>
  import ShowComponent from '../components/show';
  import EditComponent from '../components/edit';

  export default {
    data() {
      return {
        message: 'this is my vue!',
        currentView: "ShowComponent"
      }
    },

      computed: {
        toggleButton: function() {
            return this.currentView === "ShowComponent" ?
                'show': 'Edit';
        }
      },
    components: {
        EditComponent,
        ShowComponent
    },
    methods: {
      toggle() {
        this.currentView =
            this.currentView === "ShowComponent" ?
            "EditComponent" : "ShowComponent";
      }
    }
  }

</script>