关于Vue的组件切换【v-if、v-show、template、component】

我们知道在Vue中，页面结构是由组件构成的，不同的组件可以表示不同的页面，适合进行单页面（SPA）开发。接下来，我们演示登录和注册组件的切换既然Vue是由组件组成的，那很自然的，我们容易想到，如果我们需要切换各个组件呢？v-if通过v-if去渲染组件示例代码如下<!DOCTYPE html><html lang='zh_cn'><head><meta ch

qq_22841387

2971人浏览 · 2022-04-03 19:10:57

qq_22841387 · 2022-04-03 19:10:57 发布

我们知道在Vue中，页面结构是由组件构成的，不同的组件可以表示不同的页面，适合进行单页面（SPA）开发。
接下来，我们演示登录和注册组件的切换

既然Vue是由组件组成的，那很自然的，我们容易想到，如果我们需要切换各个组件呢？

v-if

通过v-if去渲染组件
示例代码如下

<!DOCTYPE html>
<html lang='zh_cn'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width' , initial-scale='1.0'>
    <title>Vue 组件切换</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
</head>

<body>
    <div id='app'>
        <a href="#" @click.prevent="flag ? flag : flag = !flag">登陆</a>
        <a href="#" @click.preven="flag ? flag = !flag: flag ">注册</a>


        <login v-if="flag"></login>
        <register v-else="flag"></register>

    </div>

    <template id="login">
        <div>
            <p>{{loginTitle}}</p>
        </div>
    </template>

    <template id="register">
        <div>
            <p>{{registerTitle}}</p>
        </div>
    </template>

    <script>
        Vue.component('login', {
            template: '#login',
            data() {
                return {
                    loginTitle: '登陆组件',
                }
            }
        })

        Vue.component('register', {
            template: '#register',
            data() {
                return {
                    registerTitle: '注册组件'
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false,
            },
            methods: {

            },
        })
    </script>

</body>

</html>

页面中注册了两个组件，一个是login还有一个是register，两者都有对应data显示
APP根组件中通过flag控制默认显示的组件和组件的切换

演示效果
请添加图片描述
当然也可以使用v-show进行组件的切换，对于频繁切换组件的位置推荐使用，因为v-show仅对display的样式进行修改，不涉及到真正的DOM结点的更改
示例代码如下


<login v-show="flag"></login>
<register v-show="!flag"></register>

但是我们发现v-if和v-show控制组件，都需要将所需要的组件写出来，这就可能对扩展性不好（因为当我需要添加新的页面的时候，我需要添加很多代码却达到目的）

那有没有其他的方法能支持更多的组件进行切换呢？
答案是有，使用component进行组件切换

component

只需改变对应的app的div下的内容即可

<div id='app'>
        <a href="#" @click.prevent="whichComponent = 'login'">登陆</a>
        <a href="#" @click.prevent="whichComponent = 'register'">注册</a>
        <component :is="whichComponent">

    </div>

实验结果，与上述一致

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^