component 폴더에 tabItems 폴더 생성
src/component/tabItems/menu1(2,3).vue 3개 파일
<template>
<div>
<h1>Menu n</h1>
<input type="text" v-model="username" />
</div>
</template>
<script>
export default {
data() {
return {
username: "",
};
},
};
</script>
<style></style>
component
app.vue
<template>
<div>
<!-- <h1>Component</h1>
<button @click="displayDetail = true">show detail</button>
<DetailVue v-if="displayDetail" @closeDetail="close" @sendData="showData" /> -->
<h1>Hello Vue!!</h1>
<!-- <CompLevel1 /> -->
<button @click="actionTab = 'menu1'">menu1</button>
<button @click="actionTab = 'menu2'">menu2</button>
<button @click="actionTab = 'menu3'">menu3</button>
<!-- <menu1 v-if="activeTab === 'menu1'" />
<menu2 v-if="activeTab === 'menu2'" />
<menu3 v-if="activeTab === 'menu3'" /> -->
<keep-alive>
<component :is="actionTab"></component>
</keep-alive>
</div>
</template>
<script>
import menu1 from "./components/tabItems/menu1.vue";
import menu2 from "./components/tabItems/menu2.vue";
import menu3 from "./components/tabItems/menu3.vue";
export default {
name: "App",
components: {
menu1,
menu2,
menu3,
},
provide() {
return {
name: this.username,
};
},
data() {
return {
username: "bada",
actionTab: "menu1",
};
},
methods: {
// changeName() {
// this.username = "DDochi";
// },
close() {
this.displayDetail = false;
},
showData(data) {
console.log(data);
},
},
directives: {},
computed: {},
watch: {},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>