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