組件切換方式（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>