组件切换方式（Vue.js）

2019-08-14 10:30:40来源：博客园阅读 ()

　　这里，我用一个注册登录两组件的切换实例来演示：

切换方式一

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>独秀不爱秀</title>
</head>

<body>
    <div id="app">
        <a href="#" @click.prevent="flag = true">登录</a>
        <a href="#" @click.prevent="flag = false">注册</a>

        <!-- 默认显示 登录组件 -->
        <login v-if="flag"></login>
        <register v-else="flag"></register>
    </div>

    <script src="./lib/vue-2.4.0.js"></script>

    <script type="text/javascript">
        Vue.component('login', {
            template: '<h3>登录组件</h3>'
        });

        Vue.component('register', {
            template: '<h3>注册组件</h3>'
        });

        const vm = new Vue({
            el: '#app',
            data: {
                flag: true
            },
        });
    </script>
</body>

</html>

这个方式唯一的缺陷就是只能在两个组件之前切换，当要求需要三个及三个以上的组件切换的时候，这就不行了(原因是 flag 只有 true 和 false 两个值)，这就要要使用方式二了。

切换方式二

这里，我们需要学到一个 Vue 官方提供的元素 component。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>独秀不爱秀</title>
</head>

<body>
    <div id="app">
        <a href="#" @click.prevent="comName = 'login'">登录</a>
        <a href="#" @click.prevent="comName = 'register'">注册</a>
        <!-- 
            Vue 提供的 component 来展示对应名称的组件
            component 是一个占位符
            :is 属性指定 组件名称
        -->
        <component :is="comName"></component>

    </div>

    <script src="./lib/vue-2.4.0.js"></script>

    <script type="text/javascript">
        // 组件名称是字符串
        Vue.component('login', {
            template: '<h3>登录组件</h3>'
        });

        Vue.component('register', {
            template: '<h3>注册组件</h3>'
        });

        const vm = new Vue({
            el: '#app',
            data: {
                comName: 'login'// 当前 component 中的 :is 绑定的组件名称
            },
        });
    </script>
</body>

</html>

现在，我们在添加一个退出组件（这是为了证明第二种组件切换方式的好处）

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>独秀不爱秀</title>
</head>

<body>
    <div id="app">
        <a href="#" @click.prevent="comName = 'login'">登录</a>
        <a href="#" @click.prevent="comName = 'register'">注册</a>
        <a href="#" @click.prevent="comName = 'out'">退出</a>
        <!-- 
            Vue 提供的 component 来展示对应名称的组件
            component 是一个占位符
            :is 属性指定 组件名称
        -->
        <component :is="comName"></component>
    </div>

    <script src="./lib/vue-2.4.0.js"></script>

    <script type="text/javascript">
        // 组件名称是字符串
        Vue.component('login', {
            template: '<h3>登录组件</h3>'
        });

        Vue.component('register', {
            template: '<h3>注册组件</h3>'
        });

        Vue.component('out', {
            template: '<h3>退出组件</h3>'
        });

        const vm = new Vue({
            el: '#app',
            data: {
                // 默认显示 登录组件
                comName: 'login'// 当前 component 中的 :is 绑定的组件名称
            },
        });
    </script>
</body>

</html>