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

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-20200207174804489

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

完整示例代码

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。