Vue不同组件之间的切换

Vue不同组件之间的切换

组件的切换有两种方式，第一种使用v-if和v-else进行切换，第二种是使用标签名component来实现切换。

使用v-if和v-else进行切换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
</head>

<body>
    <div id="app">
        <a href="" @click.prevent="flag = !flag">登录</a>
        <a href="" @click.prevent="flag = !flag">注册</a>
        <login v-if="flag"></login>
        <register v-else="flag"></register>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                flag: true
            },
            methods: {

            },
            components: { //定义实例内部私有组件
                login: {
                    template: "<h1>这是自定义的login组件</h1>"
                },
                register: {
                    template: "<h1>这是自定义的register组件</h1>"
                }
            },
        });
    </script>
</body>

</html>

使用v-if和v-else进行切换方式可以实现组件的切换，但是最多只能有2个，有一定的局限性。

使用标签component来实现切换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</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="'login'"></component> -->
        <component :is="comName"></component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                flag: true,
                comName: 'login'
            },
            methods: {

            },
            components: { //定义实例内部私有组件
                login: {
                    template: "<h1>这是自定义的login组件</h1>"
                },
                register: {
                    template: "<h1>这是自定义的register组件</h1>"
                }
            },
        });
    </script>
</body>

</html>

使用<component :is="comName"></component>进行切换，只需要修改comName的值则可以切换成对应名称的组件，没有数量上的限制，可以替换成任何组件。

总结-第二种更好用

使用v-if和v-else进行切换，只能进行两个组件的切换；使用标签component来实现切换，可以切换成任何组件，第二种更为通用，推荐使用。

# vue.js # javascript
Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue