Итак, у меня есть Tabs.vue компонент с четырьмя вкладками:
<template>
.
.
<v-tab href="#tab-1" @click="showFirstTabFunc">
First Tab
<v-icon>check_box_outline_blank</v-icon>
</v-tab>
<v-tab href="#tab-2" @click="showSecondTabFunc">
Second Tab
<v-icon>indeterminate_check_box</v-icon>
</v-tab>
<v-tab href="#tab-3" @click="showThirdTabFunc">
Third Tab
<v-icon>memory</v-icon>
</v-tab>
<v-tab href="#tab-4" @click="showTabFourFunc">
Fourth Tab
<v-icon>list_alt</v-icon>
</v-tab>
.
.
</template>
<script>
.
.
methods:{
showFirstTabFunc(){
},
showSecondTabFunc(){
},
showThirdTabFunc(){
},
showFourthTabFunc(){
},
.
.
</script>
Теперь у меня есть родительский компонент App.vue , который содержит:
<template>
.
.
<app-tabs></app-tabs>
.
.
</template>
<script>
import Tabs from "./Tabs.vue";
export default {
data() {
return {
showFirstTab: false,
showSecondTab: false,
showThirdTab: false,
showTabFour: false,
}
},
components:{
appTabs: Tabs
}
}
</script>
Моя цель состоит в том, чтобы нажать, скажем, «Первая вкладка» в Tabs.vue и тем самым изменить «showFirstTab» с false на true в App.vue ,И затем, если я нажимаю на вторую вкладку в Tabs.vue «showFirstTab» в App.vue становится ложным, а «showSecondTab» становится истинным и т. Д.
PS да, я должен оставить эти реквизиты в родительском компоненте.