Introduction à la transmission synchrone et à la transmission asynchrone des composants parent-enfant Vue (avec code)

Ce que cet article vous apporte est une introduction à la transmission synchrone et asynchrone des composants parent-enfant de Vue (avec code). Il a une certaine valeur de référence. J'espère que cela sera utile. toi.

1. Transférer les données de manière synchrone

Le composant parent food transmet le champ de type avec une valeur de 0 au composant enfant via les accessoires. champ lors de l'initialisation. , rendant le caractère "0 fruit"

// 父组件 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 Transmission asynchrone des données

Pour assurer une transmission asynchrone des données, selon les deux- Le principe de liaison de manière de VUE, il n'est pas difficile de savoir, les données transmises de manière asynchrone nécessitent une surveillance.

2.1 props

Si les données transmises par props sont associées au modèle, les données seront surveillées lors de l'initialisation du composant. Vous pouvez voir le type et les informations dans le code ci-dessous.
Si les données transmises par les accessoires ne sont pas associées au modèle, ajoutez une surveillance pour les données transmises par les accessoires et modifiez l'objet associé au modèle dans la méthode watch. Vous pouvez voir le child_type dans le code ci-dessous. Dans cette méthode, ce que la montre surveille, ce sont les accessoires modifiés, l'objet cible doit donc être initialisé.

// 父组件 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

Les données sont stockées dans le magasin et le composant parent appelle des méthodes dans vuex pour modifier les données.
Si les données du magasin sont associées au modèle du sous-composant, les données seront surveillées lors de l'initialisation du sous-composant.
Si les données du magasin ne sont pas associées au modèle du sous-composant, ajoutez une surveillance pour les données du magasin et modifiez l'objet associé au modèle dans la méthode watch. L'objet associé au modèle doit être initialisé.

3. Transférer des données de manière synchrone ou asynchrone

Si le composant parent peut transférer des données de manière synchrone ou asynchrone vers le composant enfant, celui-ci doit d'abord définir la cible dans créé ou calculé L'objet est initialisé et le composant enfant doit surveiller les données transmises par les accessoires et modifier l'objet cible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!