Vue 组件切换的方式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 组件切换的方式相关的知识，希望对你有一定的参考价值。
参考技术A <body><script src="../libs/vue.js"></script>
<div id="app">
<a href="" @click.prevent="tag = true">登录</a>
<a href="" @click.prevent="tag = false">注册</a>
组件的切换 1.v-if
<login v-if="tag"></login>
<register v-else></register>
<a href="" @click.prevent="seen = true">登录</a>
<a href="" @click.prevent="seen = false">注册</a>
组件的切换 2.v-show
<login v-show="seen"></login>
<register v-show="!seen"></register>
<a href="" @click.prevent="sendlogin">登录</a>
<a href="" @click.prevent="flag = 'register'">注册</a>
<!--组件的切换 3.component -->
<!--component 是用来占位的，具体内容，还要根据is里的数据展示-->
<!--is是用来指定要展示组件的名称的 is=“componentId”-->
<component :is="flag"></component>
</div>
<template id="login">
<div>
<h2>login子组件的内容</h2>
</div>
</template>
<template id="register">
<div>
<h2>register子组件的内容</h2>
</div>
</template>
<script>
//注意：html对大小写是不明感
//有大写字母的组件，需要转换成小写
//尽量不要用驼峰命名的规则命名组件，
//组件的名称
Vue.component('login',
template: '#login'
)
Vue.component('register',
template: '#register'
)
var app = new Vue(
el: '#app',
data:
tag: true,
seen: true,
flag: 'login'
,
methods:
sendlogin()
this.flag = 'login'
)
</script>
</body>
以上是关于Vue 组件切换的方式的主要内容，如果未能解决你的问题，请参考以下文章
3Vue 笔记（axiosVue 动画Vue 组件使用 this.$refs 来获取元素和组件Vue 组件中 data 和 props 的区别）