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

Posted iwishicould

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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栏一样去切换组件哈

以上是关于Vue中is属性的用法 可以动态切换组件的主要内容,如果未能解决你的问题,请参考以下文章

vue组件讲解(is属性的用法)

15《Vue 入门教程》Vue 动态组件 &amp;amp; keep-alive

第二十八篇 vue

Vue3动态组件缓存组件分发组件

vue -- 动态加载组件

[vue3进阶] 2.动态组件