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