39. Vue组件切换-使用component元素实现组件切换

需求

上一篇章使用v-if和v-else结合一个flag属性值来控制组件之间的切换。本章节使用components元素来更加直接的切换组件。

使用示例如下：

只需要绑定方法修改comName的值对应不同注册的组件名，就可以达到切换组件的效果。

示例

1.创建登陆、注册两个组件，并初始化定义组件名变量comName

image-20200207172444559

2.使用component设置指定:is组件名称，显示组件

image-20200207172901153

打开浏览器显示如下：

image-20200207173653727

3.修改comName，改为注册组件

image-20200207173735819

浏览器展示如下：

image-20200207174102172

也就是只要写一个方法来控制comName这个值，那么就可以切换组件了。

4.编写两个按钮，切换comName的值

image-20200207174607122

浏览器测试分别点击按钮，如下：

image-20200207174749818

image-20200207174804489

可以看到切换组件的效果已经出来了。

完整示例代码

    
        
        
        
        

    
    

        


            登陆
            注册

            
            
            

        

        

    

更多精彩原创Devops文章，快来关注我的Devops社群吧：