Comment résoudre le problème selon lequel une erreur sera signalée lorsque les accessoires d'uniapp sont modifiés ?

Récemment, lors du développement d'un projet à l'aide d'uniapp, j'ai rencontré des problèmes concernant le transfert et le changement d'accessoires, et des erreurs peuvent survenir. Cet article fournira le contexte de ces problèmes et leurs solutions correspondantes.

1. Que sont les accessoires ?

Props (abréviation de Properties) est un mécanisme utilisé dans les composants pour transmettre des données. Il existe deux manières de communiquer entre les composants : les accessoires et les événements. Props transfère un flux de données unidirectionnel, c'est-à-dire que les données sont transférées du composant parent au composant enfant. Le composant enfant ne peut lire que les données transmises par le composant parent, mais ne peut pas les modifier. L'événement fait référence au composant enfant qui transmet des messages ; au composant parent.

Dans Vue, vous pouvez déclarer les propriétés requises par un composant via l'attribut props. Les valeurs de ces propriétés peuvent être transmises depuis le composant parent et peuvent être n'importe quel type de données JavaScript, y compris des objets, des tableaux, des valeurs booléennes, etc.

Dans uniapp, afin de rendre la structure du code cohérente lors de l'écriture d'applets natifs et d'applications H5, uniapp adopte la syntaxe de Vue et ses API associées. Par conséquent, uniapp prend également en charge l'utilisation des attributs props pour transmettre des données.

Par exemple, définissez un accessoire dans le composant parent :

<template>
  <child-component :message="parentMessage" />
</template>
<script>
  import childComponent from 'child-component.vue'
  export default {
    components: {
      childComponent
    },
    data() {
      return {
        parentMessage: 'Hello'
      }
    }
  }
</script>

puis recevez-le via des accessoires dans le composant enfant :

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    props: {
      message: String
    }
  }
</script>

Après l'exécution, les données transmises par le composant parent au composant enfant seront rendues sur la page .

2. Rapport d'erreurs lorsque les props changent

Lors du développement avec uniapp, nous pouvons changer la valeur des props dans le sous-composant, par exemple :

<template>
  <child-component :count="num"/>
</template>
<script>
  import childComponent from 'child-component.vue'
  export default {
    components: {
      childComponent
    },
    data() {
      return {
        num: 0
      }
    },
    mounted() {
      setInterval(() => {
        this.num++
      }, 1000)
    }
  }
</script>

Dans le sous-composant enfant-composant :

<template>
  <div>{{ count }}</div>
</template>
<script>
  export default {
    props: {
      count: Number
    }
  }
</script>

Mais une erreur apparaîtra à ce moment-là :

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.

La signification de cette erreur est que nous devons éviter de modifier directement la valeur de l'attribut props, car la mise à jour de cette valeur sera écrasée lors du nouveau rendu du composant parent. Au lieu de cela, nous devrions traiter les données via des propriétés calculées ou en utilisant les valeurs des accessoires.

3. Solution

Alors, comment devrions-nous résoudre ce problème ?

Une solution consiste à utiliser les propriétés calculées dans le composant enfant au lieu d'utiliser directement la valeur des accessoires :

<template>
  <div>{{ renderCount }}</div>
</template>
<script>
  export default {
    props: {
      count: Number
    },
    computed: {
      renderCount() {
        return this.count
      }
    }
  }
</script>

De cette façon, lorsque la valeur des accessoires transmise par le composant parent au composant enfant est modifiée en externe, la valeur calculée Les propriétés du composant enfant changeront également Update en conséquence. De cette façon, ce qui est restitué dans le composant enfant est la valeur de la propriété calculée, plutôt que d'utiliser directement les accessoires.

Une autre solution consiste à passer un attribut data dans le composant parent au lieu d'utiliser directement la valeur props :

<template>
  <child-component :count="num" :computedCount="computedCount"/>
</template>
<script>
  import childComponent from 'child-component.vue'
  export default {
    components: {
      childComponent
    },
    data() {
      return {
        num: 0,
        computedCount: 0
      }
    },
    mounted() {
      setInterval(() => {
        this.num++
        this.computedCount++
      }, 1000)
    }
  }
</script>

Le composant enfant utilise toujours des props pour recevoir :

<template>
  <div>{{ count }}</div>
</template>
<script>
  export default {
    props: {
      count: Number,
      computedCount: Number
    }
  }
</script>

De cette façon, passez un attribut data dans le composant parent À enregistrez et calculez la valeur des accessoires, puis transmettez les résultats calculés au composant enfant. De cette façon, la valeur restituée dans le composant enfant est la valeur de la propriété calculatedCount au lieu d'utiliser directement les accessoires.

Les deux solutions peuvent éviter les erreurs causées par la modification directe des attributs des accessoires dans les sous-composants.

4. Résumé

Lorsque nous développons à l'aide d'uniapp, le transfert et le changement d'accessoires sont inévitables. Afin de rendre l'application que nous développons plus stable et sécurisée, nous devons éviter de modifier directement la valeur de l'attribut props. Au lieu de cela, nous devons enregistrer et calculer la valeur des accessoires via des attributs calculés ou un attribut de données. De cette façon, nos applications peuvent être plus robustes et fiables.

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!