所以我有一个带有四个选项卡的 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 中的 First Tab,然后将 App.vue 中的“showFirstTab”从 false 更改为 true。然后,如果我单击 Tabs.vue 中的第二个选项卡,App.vue 中的“showFirstTab”将变为 false,“showSecondTab”将变为 true,依此类推。
P.S 是的,我必须将这些 Prop 保留在父组件中。
最佳答案
您可以emit event致家长
showFirstTabFunc () {
this.$emit('setActiveTab', 'showFirstTab')
}
在父级
<app-tabs @setActiveTab="setActiveTab"></app-tabs>
methods: {
setActiveTab (activeTab) {
this.showFirstTab = false
this.showSecondTab = false
this.showThirdTab = false
this.showTabFour = false
this[activeTab] = true
}
}
关于javascript - 在父级 Vuejs 中更改子级的 props,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52602007/