Vue is the usage attributes can dynamically switch assembly

and IS is a property of the component, the component used to display the name
is associated with the component and Ha <component: is = "comName">
VUE component provided to show the corresponding component name
compont is a placeholder, this property is, with to show the corresponding component name

Three subcomponents

<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>

Behaves as a tab bar to switch components Kazakhstan