is 是组件的一个属性, 用来展示组件的名称
is 和 component 联用哈 <component :is="comName">
vue 提供了 component 来展示对应的组件名称
compont 是一个占位符, is 这个属性, 用来展示对应的组件名称
三个子组件
- <template>
- <div>
- <h2 > 我是登录组件 </h2>
- </div>
- </template>
- <template>
- <div>
- <h2 > 我是注册组件 </h2>
- </div>
- </template>
- <template>
- <div>
- <h2 > 遇见问题 </h2>
- </div>
- </template>
- ## 在某个页面中使用组件 ##
- <template>
- <div>
- <!-- is 属性的使用 -->
- <div class="box">
- <div class="link-a" @click="comName='login'"> 登录 </div>
- <div class="link-a" @click="comName='resgister'"> 注册 </div>
- <div class="link-a" @click="comName='mett'"> 遇见问题 </div>
- </div>
- <component :is="comName"></component>
- </div>
- </template>
- <script>
- import login from "../../components/logincom/login";
- import resgister from "../../components/logincom/register";
- import mett from "../../components/logincom/mett";
- export default {
- data() {
- return {
- comName: "login"
- };
- },
- components: {
- resgister,
- login,
- mett
- }
- };
- </script>
- <style scoped>
- .box {
- display: flex;
- }
- .link-a {
- width: 80px;
- height: 40px;
- text-align: center;
- line-height: 40px;
- background: pink;
- margin-left: 20px;
- }
- </style>
可以向 tab 栏一样去切换组件哈
来源: http://www.bubuko.com/infodetail-3356863.html