Poniżej znajduje się składnik macierzysty, w którym mam trzy elementy dziecka. Używam kart Vue, aby wyświetlić każdy element podrzędny pod każdą kartą. Użytkownik może przejść do innej karty, klikając przycisk <v-tab href="# ">. Każdy element dziecka ma pole o nazwie changes, który jest polem boolowskim i domyślnie fałszywe. Problem, z którymi stoję tutaj jest to, że chcę podnieść komunikat alarmowy na kliknięciu, gdy dowolny komponent dziecka ma pola changes jest prawdziwe. Jak mogę sprawdzić wartość od rodzica we wszystkich elementach dziecka?

<template>
  <v-layout row wrap>
    <v-flex xs12 sm12 lg12>
     <div>
        <v-tabs v-model="current_tab">
          <v-tab href="#information">INFORMATION</v-tab>
          <v-tab href="#details">DETAILS</v-tab>
          <v-tab href="#services">SERVICES</v-tab>
          <v-tab-item value="#information" id="information">
           <Information />
          </v-tab-item>
          <v-tab-item value="#details" id="details">
           <Details />
          </v-tab-item>
          <v-tab-item value="#services" id="services">
           <Services />
          </v-tab-item>
         </v-tabs>
       </div>
    </v-flex>
  </v-layout>
</template>

<script>
  import Information from 'views/information/edit.vue';
  import Details from 'views/details/edit.vue';
  import Services from 'views/services/edit.vue';

  export default {
    components: {
      Information,
      Details,
      Services,
    },
    data: function () {
      return {
        current_tab: 'information',
      }
    },
  }
</script>

Poniżej znajduje się próbka komponentu dla dzieci, w której pole Zmiany jest ustawione na false.

<template>
  <div>
    
  </div>
</template>

<script>  
  export default {
   data: function () {
    return {
      changes: false
    };
   },
  }
</script>

Zaktualizuj 1

Składnik podrzędny

watch: {
 changes: function(value) {
  if (value) {
     this.$emit('changes-event')
  }        
 }
}

Składnik rodzica.

<Information v-on:changes-event="alertMessage"/>

export default {
  methods: {
   alertMessage() {
     console.log("Alert: changes has been mutated.")
   }
  }
};
0
user12763413 30 lipiec 2020, 21:08

1 odpowiedź

Najlepsza odpowiedź

Możesz po prostu użyć funkcji $ emitu, aby wysłać zdarzenia z dziecka do rodzica, gdy wartość change jest aktualizowana.

Po pierwsze, w elementach dzieci (informacje, szczegóły i usługi), oglądasz dla changes, aby zmutować i skręcić prawdziwe. Kiedy to robi, emituj wydarzenie jak:

watch: {
 changes: function(value) {
  if (value) {
     this.$emit('changes-event')
  }        
 }
}

(W powyższym przykładzie "Zmiany-zdarzenie" to nazwa przypisana do zdarzenia niestandardowego.)

Następnie, w komponencie macierzystym, słuchasz wydarzenia, tak jak każde inne wydarzenie:

      <v-tabs v-model="current_tab">
          <v-tab href="#information">INFORMATION</v-tab>
          <v-tab href="#details">DETAILS</v-tab>
          <v-tab href="#services">SERVICES</v-tab>
          <v-tab-item value="#information" id="information">
           <Information v-on:changes-event="alertMessage"/>
          </v-tab-item>
          <v-tab-item value="#details" id="details">
           <Details v-on:changes-event="alertMessage"/>
          </v-tab-item>
          <v-tab-item value="#services" id="services">
           <Services v-on:changes-event="alertMessage"/>
          </v-tab-item>
         </v-tabs>

A następnie dodaj alertomessage metody, aby obsłużyć alert:

  export default {
    
    methods: {
      alertMessage() {
        console.log("Alert: changes has been mutated.")
      }
    }
  };

Więcej informacji na temat wydarzenia znajdziesz tutaj: https://vuejs.org/v2/guide/components-Custom-Events. HTML.

1
crosen9999 30 lipiec 2020, 19:21