Смена реквизита от ребенка в родительском Vuejs - PullRequest
0 голосов
/ 02 октября 2018

Итак, у меня есть 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 да, я должен оставить эти реквизиты в родительском компоненте.

1 Ответ

0 голосов
/ 02 октября 2018

Вы можете отправить событие в родительский

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
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...