Vue不同组件之间的切换
Vue不同组件之间的切换Vue不同组件之间的切换使用v-if和v-else进行切换使用标签component来实现切换总结Vue不同组件之间的切换组件的切换有两种方式，第一种使用v-if和v-else进行切换，第二种是使用标签名component来实现切换。使用v-if和v-else进行切换<!DOCTYPE html><html lang="en"><head>
·
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来实现切换，可以切换成任何组件，第二种更为通用，推荐使用。
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献12条内容
所有评论(0)