is 속성을 이용해 컴포넌트를 선택해서 렌더링 할 수 있다.
currentTabComponent가 'home'을 리턴하는지 'blog'를 리턴하는지에 따라서
다른 컴포넌트가 나타난다.
<!DOCTYPE html>
<html>
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root">
<button v-on:click="currentTab = 'home'">Home</button>
<button v-on:click="currentTab = 'blog'">Blog</button>
<component v-bind:is="currentTabComponent"></component>
</div>
<script>
const app = Vue.createApp({
data() {
return {
currentTab: 'home'
}
},
computed: {
currentTabComponent() {
return this.currentTab
}
}
})
app.component('home', {
template: `<div>Home component</div>`
})
app.component('blog', {
template: `<div>Blog component</div>`
})
app.mount('#root')
</script>
</body>
</html>'Vue' 카테고리의 다른 글
| 싱글 파일 컴포넌트(SFC)로 VueJS 시작하기 (0) | 2021.02.21 |
|---|---|
| VueJS의 자식 컴포넌트에서 부모에 이벤트를 주는 방법 (0) | 2021.02.20 |
| VueJS 시작하기 (0) | 2021.02.20 |
| NuxtJS로 Github에 블로그 만드는 방법 (0) | 2021.02.17 |
