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

68 阅读 0 评论 45 点赞

我是靠谱客的博主拉长柠檬，最近开发中收集的这篇文章主要介绍39. Vue组件切换-使用component元素实现组件切换，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

需求

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

使用示例如下：

<!-- Vue提供了 component ,来展示对应名称的组件 -->
<!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 -->
<component :is="comName"></component>

只需要绑定方法修改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

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

完整示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--  导入vue.js库  -->
        <script src="lib/vue.js"></script>

    </head>
    <body>

        <div id="app1">

            <a href="" @click.prevent=" comName='login' ">登陆</a>
            <a href="" @click.prevent=" comName='register' ">注册</a>

            <!-- Vue提供了 component ,来展示对应名称的组件 -->
            <!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 -->
            <component :is="comName"></component>

        </div>

        <script>        
            // 创建登陆组件
            Vue.component('login',{
                template:'<h1>登陆组件</h1>'
            })

            // 创建注册组件
            Vue.component('register',{
                template:'<h1>注册组件</h1>'
            })

            // 创建第一个Vue的实例
            var vm1 = new Vue({
                el: '#app1',
                data: {
                    comName: '', // 设置默认的组件显示登陆
                },
            })

        </script>

    </body>
</html>

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