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

posted @   南风晚来晚相识  阅读(995)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示