Vue笔记-组件Component-动态组件

最新推荐文章于 2024-06-21 11:09:47 发布

德芙小雨更配

最新推荐文章于 2024-06-21 11:09:47 发布

阅读量269

点赞数

分类专栏： component组件文章标签： vue.js

本文链接：https://blog.csdn.net/qq_39213693/article/details/114979462

版权

component组件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

动态组件适用于多个组件频繁切换显示处理

<component>标签将一个”元组件“渲染成为动态组件，以is属性决定渲染哪个组件
:is可以绑定已注册组件的名字，或一个组件的选项对象

示例

    <div id="app">
        <button @click='change'>切换</button>
        <!-- 通过改变com来改变显示的组件 -->
        <component :is="com"></component>
    </div>

<script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.component('MyComA', {
            template: `
            <div>
                 <h1>{{ title }}</h1>
            </div>`,
            data() {
                return {
                    title: '组件data'
                }
            },
        })
        new Vue({
            el: '#app',
            data: {
                com: 'MyComA'
            },
            components: {
                MyComB: {
                    template: `<div>mycomb</div>`
                }
            },
            methods: {
            	// 通过改变com来改变显示组件
                change() {
                    if (this.com === 'MyComA') {
                        this.com = 'MyComB'
                    } else {
                        this.com = 'MyComA'
                    }
                }
            },

        })
    </script>