Einführung in die synchrone Übertragung und asynchrone Übertragung von Vue-Eltern-Kind-Komponenten (mit Code)

Dieser Artikel bietet Ihnen eine Einführung in die synchrone Übertragung und die asynchrone Übertragung von Vue-Eltern-Kind-Komponenten (mit Code). Ich hoffe, dass er für Freunde in Not hilfreich ist Du.

1. Daten synchron übertragen

Die übergeordnete Komponente food übergibt das Typfeld mit dem Wert 0 über props an die untergeordnete Komponente Feld während der Initialisierung. , Darstellung des Zeichens „0 Frucht“

// 父组件 food.vue
<template>
  <apple :type="type"></apple>
</template>
<script>
    data (){
        return {
          type: 0
      };
      }
</script>
// 子组件 apple.vue
<template>
  <span>{{childType}}</span>
</template>
<script>
   props: ['type'],
   created () {
           this.childType = this.formatterType(type);
   },
   method () {
           formatterType (type) {
        if (type === 0) {
          return "0 水果";
        }
        if (type === 1) {
          return "1 蔬菜";
        }
        return '';
      }
   }
</script>

2 Asynchrone Übertragung von Daten

Um eine asynchrone Übertragung von Daten gemäß der bidirektionalen Bindung sicherzustellen Prinzip von VUE, es ist nicht schwer zu wissen, dass asynchrone Daten eine Überwachung erfordern.

2.1 Requisiten

Wenn die von Requisiten übergebenen Daten mit der Vorlage verknüpft sind, werden die Daten beim Initialisieren der Komponente überwacht. Sie können Typ und Informationen im Code unten sehen.
Wenn die von Requisiten übergebenen Daten nicht mit der Vorlage verknüpft sind, fügen Sie eine Überwachung für die von Requisiten übergebenen Daten hinzu und ändern Sie das mit der Vorlage verknüpfte Objekt in der Überwachungsmethode. Sie können den child_type im Code unten sehen. Bei dieser Methode überwacht die Uhr die geänderten Requisiten, daher muss das Zielobjekt initialisiert werden.

// 父组件 food.vue
<template>
  <apple :type="type" :info="info"></apple>
</template>
<script>
  data (){
    return {
      type: 0,
      info: {comment: 'ugly food'}
    };
  }
  created () {
      setTimeout (()=>{
        this.type = 1;
      this.info = {comment: 'tasty food'};
    },1000);
  }
</script>
// 子组件 apple.vue
<template>
  <p class="memuManage">
    <span>type: {{child_type}}</span>
    <span>type: {{type|formatterType}}</span>
    <span>info: {{info.comment}}</span>
  </p>
</template>
<script>
  export default {
    data () {
      return {
        child_type: ''
      };
    },
    props: ["type","info"],
    watch: {
      type (newVal) {
        this.child_type = this.formatterType(newVal);
      }
    },
    created () {
      this.child_type = this.formatterType(this.type);
    },
    filters: {
      formatterType: function (type) {
        if (type === 0) {
          return "0 水果";
        }
        if (type === 1) {
          return "1 蔬菜";
        }
        return '';
      }
    },
    methods: {
      formatterType (type) {
        if (type === 0) {
          return "0 水果";
        }
        if (type === 1) {
          return "1 蔬菜";
        }
        return '';
      }
    }
  };
</script>

2.2 vuex

Die Daten werden im Speicher gespeichert und die übergeordnete Komponente ruft Methoden in vuex auf, um die Daten zu ändern.
Wenn die Geschäftsdaten mit der Vorlage der Unterkomponente verknüpft sind, werden die Daten bei der Initialisierung der Unterkomponente überwacht.
Wenn die Geschäftsdaten nicht mit der Vorlage der Unterkomponente verknüpft sind, fügen Sie eine Überwachung für die Geschäftsdaten hinzu und ändern Sie das mit der Vorlage verknüpfte Objekt in der Überwachungsmethode. Das mit der Vorlage verknüpfte Objekt muss initialisiert werden.

3. Daten synchron oder asynchron übertragen

Wenn die übergeordnete Komponente Daten synchron oder asynchron an die untergeordnete Komponente übertragen kann, muss die untergeordnete Komponente zunächst mit dem Ziel übereinstimmen erstellt oder berechnet Das Objekt wird initialisiert und die untergeordnete Komponente muss die von Requisiten übergebenen Daten überwachen und das Zielobjekt ändern.

Das obige ist der detaillierte Inhalt vonEinführung in die synchrone Übertragung und asynchrone Übertragung von Vue-Eltern-Kind-Komponenten (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!