vue中使用动态组件

最新推荐文章于 2024-10-13 20:20:53 发布

coldriversnow

最新推荐文章于 2024-10-13 20:20:53 发布

阅读量244

点赞数

文章标签： vue

原文链接：https://blog.csdn.net/k_520_w/article/details/103532047

版权

动态组件的使用，记录如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件component</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
</head>    
<body>
    <div id="root">
        <!--使用动态组件component，通过type决定展示-->
        <component :is="type"></component>
        <!--定义一个button-->
        <button @click="handlerClick">改变</button>
    </div>
    <script>
        //下面定义两个全局组件
        Vue.component('child-one',{
            template:'<div>child-one</div>',
        });
        Vue.component('child-two',{
            template:'<div>child-two</div>',
        });
         var app = new Vue({//创建一个vue的实例，里面的都是一些配置项
             el:'#root',
             data() {
                 return {
                     type:'child-one'
                 }
             },
             methods: {
                handlerClick:function(){
                    if(this.type==='child-one'){
                        this.type = 'child-two';
                    }else{
                        this.type='child-one';
                    }   
                }
             },
        });        
    </script>
</body>
</html>

参考：https://www.cnblogs.com/sunshine-wy/p/11084555.html
https://blog.csdn.net/k_520_w/article/details/103532047