我们来做一个不同组件之间的切换的简单案例。
比如做一个登录和注册相互切换
<div id="app">
<a href="" @click.prevent="flag=true">登录</a>/
<a href="" @click.prevent="flag=false">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<script>
Vue.component('login',{
template:"<h3>登录页面</h3>"
})
Vue.component('register',{
template:"<h3>注册页面</h3>"
})
var vm=new Vue({
el:"#app",
data:{
flag:false
},
methods: {
},
})
</script>
接下来我们用component :is 来优化下代码,
component是一个占位符,is属性,可以用来指定要展示的组件的名称。
<div id="app">
<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>
<!-- component是一个占位符,is属性,可以用来指定要展示的组件的名称 -->
<component :is="comName"></component>
</div>
<script>
// 组件名称是字符串
Vue.component('login',{
template:'<h3>登录页面</h3>'
})
Vue.component('register',{
template:'<h3>注册页面</h3>'
})
//创建vue实例,得到ViewModel
var vm=new Vue({
el:"#app",
data:{
comName:'login' //当前component 中的 :is绑定的组件的名称 这里默认为展示登录
},
methods:{}
})
</script>