组件切换方式（Vue.js）

时间 2019-11-12

原文原文链接

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

切换方式一

<!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 两个值)，这就要要使用方式二了。html

切换方式二

这里，咱们须要学到一个 Vue 官方提供的元素 component。vue

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

如今，咱们在添加一个退出组件（这是为了证实第二种组件切换方式的好处）java

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

切换成功。app