vue基础之动态组件

最新推荐文章于 2024-05-28 16:22:58 发布

四阶张量

最新推荐文章于 2024-05-28 16:22:58 发布

阅读量185

点赞数 3

分类专栏： vue基础文章标签： vue js html5

本文链接：https://blog.csdn.net/qq_45549336/article/details/106710914

版权

vue基础专栏收录该内容

14 篇文章 1 订阅

订阅专栏

动态组件用于频繁切换组件

（1）刚开始

<body>
    <div id="root">
        <child-one v-if="type === 'child-one'"></child-one>
        <child-two v-if="type === 'child-two'"></child-two>
        <button @click="change">change</button>
    </div>
    <script>
        //创建子组件
        Vue.component('child-one', {
            template: `<div>
                            child-one
                       </div>`
        })
        Vue.component('child-two', {
            template: `<div>
                            child-two
                       </div>`
        })

        //创建vue实例对象
        var vm = new Vue({
            el: '#root',
            data: {
                type: 'child-one'
            },
            methods: {
                change() {
                    this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
                }
            }
        })
    </script>
</body>

改进后

<div id="root">
        <component :is="type"></component>
        <button @click="change">change</button>
    </div>
 //创建子组件
        Vue.component('child-one', {
            template: `<div v-once>
                            child-one
                       </div>`
        })
        Vue.component('child-two', {
            template: `<div v-once>
                            child-two
                       </div>`
        })