组件切换-使用Vue提供的component元素实现组件
目录:
一、component实现组件
二、总结
本节主要学习组件切换的第二种方式:
一、component实现组件
例:
<div id="app">
<a href=""@clik.prevent="comName='login'">登录</a>
<a href=""@clik.prevent="comName='register'">注册</a>
// vue提供了component,来展现对应名称的组件
//component是一个占位符,:is属性,可以用来指定要展示的组件的名称
<component :is="'comName'"></component>
</div>
data:{
comname:'login'
//当前component中的:is绑定的组件的名称
}
例如:如果 is 指定的是 login ,那么就会在 Component 的位置里面替换为 login
<component:is=”login”></component>
其中,属性绑定会当做表达式来解析,并不是真是的字符串,所以上面的代码中,应该为:
<component:is=”’login’”></component>
此时再刷新,右键浏览,可以执行出正确结果:
二、总结
当前学习了几个Vue提供的标签
Component,
template,
transition,(过渡,实现单个元素过渡)
transitionGroup(过渡,实现多个元素过渡)