Vue中is属性的用法 可以动态切换组件

is 是组件的一个属性,用来展示组件的名称
is和component联用哈
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栏一样去切换组件哈

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。

作者：晚来南风晚相识

如果文中有什么错误，欢迎指出。以免更多的人被误导。