component动态组件

最新推荐文章于 2024-08-04 22:46:30 发布

大喵扣德

最新推荐文章于 2024-08-04 22:46:30 发布

阅读量312

点赞数

文章标签： elementui 蓝桥杯 vue.js

本文链接：https://blog.csdn.net/sinat_31928953/article/details/122287118

版权

 <div id="app">
            <button @click="change()">按钮</button>
            <!-- component动态组件  最终渲染的占位符是动态的 msg的值是什么 就显示那个组件  -->
            <component :is="msg"></component>
</div>
<template id="header">
    <h1>这是第一个</h1>
</template>
<template id="footer">
    <h1>这是第二个</h1>
 </template>

通过点击button切换组件，脚本代码

<script>
            var header={
                template:'#header'
            }
            var footer={
                template:'#footer'
            }
            new Vue({
                el:"#app",
                data:{
                    msg:'v-header'
                },
                methods:{
                    change(){
                        if(this.msg=='v-header'){
                            this.msg='v-footer'
                        }else{
                            this.msg='v-header'
                        }
                    }
                },
                components:{
                    'v-header':header,
                    'v-footer':footer
                }
            })