Detailed explanation of vue.js dynamic components

:is dynamic component

Use v-bind:is="component name" to automatically find a matching component name. If there is no matching component name, it will not be displayed.

<div id="app">
    <test v-bind:is="which_to_show"></test>
</div>

<script>
    var demo = new Vue({
        el: "#app",
        data: {
            which_to_show: "first"
        },
        components:
            first: {
                template: "<div>Here is the subcomponent first</div>"
            },
            second: {
                template: "<div>Here is the subcomponent second</div>"
            },
            third: {
                template: "<div>Here is the subcomponent third</div>"
            }
        }
    });
</script>

By changing the value of which_to_show, you can dynamically change the component you want to load and render, as follows:

This is the end of this article about the detailed explanation of vue.js dynamic components. For more relevant vue.js dynamic component content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!