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欄一樣去切換組件哈


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM