Wie zeigt Uniapp die von der Seite übergebenen Parameter an?

Wenn Sie eine Uniapp-basierte mobile Anwendung entwickeln, kann es vorkommen, dass Sie Parameter zwischen verschiedenen Seiten übergeben müssen. In diesem Artikel stellen wir vor, wie die von der Seite in Uniapp übergebenen Parameter angezeigt werden.

In uniapp können wir Parameter auf viele Arten an die nächste Seite übergeben. Sie können beispielsweise die von uniapp bereitgestellte Routing-Jump-API verwenden, um Parameter an die nächste Seite zu übergeben. Auf der nächsten Seite können wir die übergebenen Parameterwerte über das Objekt $mp.page abrufen und diese Parameterwerte an die Komponenten der Seite binden, um den gewünschten Effekt zu erzielen.

Zum Beispiel können wir von einer Listenseite zur Detailseite springen und einen ID-Parameter übergeben. Fragen Sie auf der Detailseite verwandte Daten basierend auf diesem ID-Wert ab und binden Sie die Daten an die Komponenten der Seite.

Wie also konkret umsetzen? Als nächstes werden wir es unter den folgenden Aspekten im Detail vorstellen.

1. Parameter beim Routing von Sprüngen übergeben

Wir können die von uniapp bereitgestellte API verwenden, um beim Routing von Sprüngen Parameter an die nächste Seite zu übergeben. Der folgende Code ist beispielsweise ein einfacher Routing-Sprung, bei dem der ID-Parameter an die Detailseite übergeben wird.

uni.navigateTo({
  url: '/pages/detail/detail?id=' + this.id
})

This.id hier ist der ID-Wert der aktuellen Seite. Wir fügen diesen Wert in den Abfrageparameter der Detailseitenadresse ein.

2. Den von der Seite übergebenen Parameterwert abrufen

Wenn wir zur Detailseite springen, müssen wir den an die Detailseite übergebenen Parameterwert abrufen. Dies kann über das Optionsattribut im $mp.page-Objekt abgerufen werden. Zum Beispiel:

onLoad(options) {
  console.log(options.id) // 打印出传递过来的id值
}

In der onLoad-Funktion können wir den übergebenen ID-Parameterwert über options.id abrufen und nachfolgende Vorgänge ausführen.

Beachten Sie, dass wir die auf der Komponentenseite übergebenen Parameter über this.$mp.options abrufen müssen.

3. Parameter an Seitenkomponenten binden

Nachdem wir die übergebenen Parameter erhalten haben, können wir diese Parameter an Unterkomponenten binden, um die Seitendatenwiedergabe zu erreichen.

In Vue können wir Parameter über die v-bind-Direktive an das props-Attribut der Komponente binden. Zum Beispiel der folgende Code:

<template>
  <div>
    <h1 id="content-title">{{ content.title }}</h1>
    <p>{{ content.desc }}</p>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      content: {}  // 用于存放获取到的数据
    }
  },
  created() {
    this.getContent(this.id)
  },
  methods: {
    getContent(id) {
      // 根据id获取数据，并将数据绑定到content对象上
    }
  }
}
</script>

Im obigen Code definieren wir ein ID-Attribut über Requisiten und weisen dem ID-Attribut den übergebenen ID-Parameter zu. In der erstellten Funktion rufen wir die Funktion getContent auf, um die Daten asynchron abzurufen und die Daten im Inhaltsobjekt zu speichern.

Schließlich binden wir die Daten im Inhaltsobjekt an die Tags h1 und p in der Komponente und zeigen die Daten an, nachdem die Seite geladen wurde.

Zusammenfassend können wir Parameter über die von uniapp bereitgestellte API übergeben, die übergebenen Parameterwerte über das $mp.page-Objekt abrufen und die Parameter durch Binden von Attributen auf der Seite rendern. Ich hoffe, dieser Artikel kann Ihnen helfen, besser zu verstehen, wie die von der Seite übergebenen Parameter in Uniapp angezeigt werden.

Das obige ist der detaillierte Inhalt vonWie zeigt Uniapp die von der Seite übergebenen Parameter an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!