Wie kann das Problem gelöst werden, dass ein Fehler gemeldet wird, wenn die Requisiten von uniapp geändert werden?

Bei der Entwicklung eines Projekts mit uniapp bin ich kürzlich auf einige Probleme bei der Übertragung und Änderung von Requisiten gestoßen, und es können Fehler auftreten. In diesem Artikel werden die Hintergründe zu diesen Problemen und die entsprechenden Lösungen erläutert.

1. Was sind Requisiten?

Props (Abkürzung für Properties) ist ein Mechanismus, der in Komponenten zur Weitergabe von Daten verwendet wird. Es gibt zwei Möglichkeiten, zwischen Komponenten zu kommunizieren: Requisiten und Ereignisse. Requisiten übertragen den Datenfluss in eine Richtung, das heißt, die Daten werden von der übergeordneten Komponente an die untergeordnete Komponente übertragen, sie können jedoch keine Nachrichten ändern, die sich auf die untergeordnete Komponente beziehen zur übergeordneten Komponente.

In Vue können Sie die von einer Komponente benötigten Eigenschaften über das Props-Attribut deklarieren. Die Werte dieser Eigenschaften können von der übergeordneten Komponente übergeben werden und jede Art von JavaScript-Daten sein, einschließlich Objekte, Arrays, boolesche Werte usw.

Um in Uniapp die Codestruktur beim Schreiben nativer Applets und H5-Anwendungen konsistent zu machen, übernimmt Uniapp die Syntax von Vue und die zugehörigen APIs. Daher unterstützt Uniapp auch die Verwendung von Props-Attributen zum Übergeben von Daten.

Definieren Sie beispielsweise eine Requisite in der übergeordneten Komponente:

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

und empfangen Sie sie dann über Requisiten in der untergeordneten Komponente:

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

Nach dem Ausführen werden die von der übergeordneten Komponente an die untergeordnete Komponente übergebenen Daten auf der Seite gerendert .

2. Fehlermeldung, wenn sich Requisiten ändern

Bei der Entwicklung mit Uniapp können wir den Wert von Requisiten in der Unterkomponente ändern, zum Beispiel:

<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>

In der untergeordneten Unterkomponente:

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

Aber ein Fehler wird zu diesem Zeitpunkt angezeigt:

[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.

Die Bedeutung dieses Fehlers besteht darin, dass wir es vermeiden sollten, den Wert des Props-Attributs direkt zu ändern, da die Aktualisierung dieses Werts überschrieben wird, wenn die übergeordnete Komponente erneut gerendert wird. Stattdessen sollten wir die Daten über berechnete Eigenschaften verarbeiten oder die Werte von Requisiten verwenden.

3. Lösung

Wie sollen wir dieses Problem lösen?

Eine Lösung besteht darin, berechnete Eigenschaften in der untergeordneten Komponente zu verwenden, anstatt den Wert von Requisiten direkt zu verwenden:

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

Auf diese Weise wird der berechnete Wert der von der übergeordneten Komponente an die untergeordnete Komponente übergebenen Requisiten extern geändert Die Eigenschaften der untergeordneten Komponente ändern sich ebenfalls entsprechend. Auf diese Weise wird in der untergeordneten Komponente der Wert der berechneten Eigenschaft gerendert, anstatt Requisiten direkt zu verwenden.

Eine andere Lösung besteht darin, ein Datenattribut in der übergeordneten Komponente zu übergeben, anstatt den Props-Wert direkt zu verwenden:

<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>

Die untergeordnete Komponente verwendet weiterhin Props zum Empfangen von:

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

Übergeben Sie auf diese Weise ein Datenattribut in der übergeordneten Komponente an Zeichnen Sie den Wert der Requisiten auf, berechnen Sie ihn und übergeben Sie die berechneten Ergebnisse dann an die untergeordnete Komponente. Auf diese Weise ist der in der untergeordneten Komponente gerenderte Wert der Wert der Eigenschaft „computedCount“, anstatt Requisiten direkt zu verwenden.

Beide Lösungen können Fehler vermeiden, die durch die direkte Änderung von Requisitenattributen in Unterkomponenten verursacht werden.

4. Zusammenfassung

Wenn wir mit Uniapp entwickeln, sind die Übertragung und Änderung von Requisiten unvermeidlich. Um die von uns entwickelte Anwendung stabiler und sicherer zu machen, müssen wir vermeiden, den Wert des Props-Attributs direkt zu ändern. Stattdessen sollten wir den Wert von Props über berechnete Attribute oder ein Datenattribut aufzeichnen und berechnen. Auf diese Weise können unsere Anwendungen robuster und zuverlässiger werden.

Das obige ist der detaillierte Inhalt vonWie kann das Problem gelöst werden, dass ein Fehler gemeldet wird, wenn die Requisiten von uniapp geändert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!