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

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栏一样去切换组件哈

原文地址：https://www.cnblogs.com/IwishIcould/p/12116990.html