Vue
VueJS에서 탭을 클릭 했을 때 컴포넌트를 변경하는 방법
Socratone
2021. 2. 20. 11:30
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>