vue.js（17）--vue的组件切换

Posted 2022-07-31 qiqisusu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js（17）--vue的组件切换相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/bootstrap.css">
    <script src="../lib/vue.js"></script>
    <style>
        .v-enter,.v-leave-to
            opacity: 0;
            transform: translateY(50px);
        
        .v-enter-active,.v-leave-active
            transition: all 0.5s ease;
        
        /* vue动画的style */
    </style>
</head>
<body>
    <div class="app">
        <a href="#" @click.prevent="comName=‘mycom1‘">登录</a>
        <a href="#" @click.prevent="comName=‘mycom2‘">注册</a>
        <a href="#" @click.prevent="comName=‘mycom3‘">退出</a>
        <!-- <mycom1 v-if="flag"></mycom1>
        <mycom2 v-else="flag"></mycom2> -->
        <transition mode="out-in">      <!-- //mode定义了切换动画的顺序为先出后进，还有in-out -->
            <component :is="comName"></component>
        </transition>
        <!-- component是一个占位符，‘：is’用来指定要展示组件的名称 -->
        <!-- transition包含的区域为要进行切换的多组件 -->
    </div>
    <template id="cmp1">
        <div>
            <h1>我是组件一</h1>
        </div>
    </template>
    <!-- 定义组件结构 -->
    <template id="cmp2">
        <div>
            <h1>俺是组件2222哟</h1>
        </div>
    </template>
    <template id="cmp3">
        <div>
            <h1>我退出啦</h1>
        </div>
    </template>
    <script>
        Vue.component(‘mycom1‘,
            template:‘#cmp1‘
        )
        //注册组件名称
        Vue.component(‘mycom2‘,
            template:‘#cmp2‘
        )
        Vue.component(‘mycom3‘,
            template:‘#cmp3‘
        )
        var vm = new Vue(
            el:‘.app‘,
            data:
                flag:true,
                comName:‘mycom1‘
            
        )  
    </script>
</body>
</html>

以上是关于vue.js（17）--vue的组件切换的主要内容，如果未能解决你的问题，请参考以下文章

Vue.js——vue-router 快速入门