Vue，组件切换-方式2

待我称王封你为后i 2021-11-16 06:58 244阅读 0赞

# Vue，组件切换-方式2 #

1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>Document</title>
     8     <script src="../js/vue.js"></script>
     9 </head>
    10 <body>
    11     <div id="app">
    12 
    13         <a href="" @click.prevent="comName='login'">登录</a>
    14         <a href="" @click.prevent="comName='register'">注册</a>
    15 
    16         
    17         
    18         
    19         
    20 
    21         
    22         <component :is="comName"></component>
    23 
    24         
    25         
    26     </div>
    27 
    28           
    29 
    30 </body>
    31 </html>
    32 <script>
    33 
    34     //组件名称是 字符串
    35     Vue.component('login', {
    36         template: '<h3>登录组件</h3>'
    37     })
    38 
    39     Vue.component('register', {
    40         template: '<h3>注册组件</h3>'
    41     })
    42 
    43     var vm = new Vue({
    44         el: '#app',
    45         data:{
    46             comName: '' // 当前 component 中的 :is 绑定的组件的名称
    47         },
    48         methods: {
    49             
    50         },
    51     })
    52 
    53 </script>

# 效果图 #

![1709882-20190705161125262-1038771987.gif][]

转载于:https://www.cnblogs.com/wo1ow1ow1/p/11138975.html

[1709882-20190705161125262-1038771987.gif]: /images/20211116/c7fca7065da64129b89eafcd0f21b8c5.png