So übergeben Sie Daten von der übergeordneten Komponente an die untergeordnete Komponente in Vue

In diesem Artikel wird hauptsächlich die Methode zum Übergeben von Daten von übergeordneten Vue-Komponenten an untergeordnete Komponenten (Requisiten) vorgestellt. Freunde, die ihn benötigen, stellen außerdem den Implementierungscode für die Wertübertragung (Requisiten) zwischen übergeordneten und untergeordneten Vue-Komponenten vor it

Vue-Seitenstruktur

Bei der Arbeit an einem Projekt kommt es oft vor, dass die Daten dieser Seite (zum Beispiel: ID Nummer) muss auf eine andere Seite gebracht werden, um die Details bestimmter Daten usw. abzufragen. Die herkömmliche Methode besteht nicht darin, Parameter zur URL oder zum Cookie hinzuzufügen oder dem „sessionStorage“ und „localStorage“ Werte zuzuweisen H5. Dies ist die Methode zum Übergeben zwischen Seiten.

Mit den beliebten komponentenbasierten Entwicklungsmethoden von Angularjs, React und Vue ist es zu einer weiteren guten Lösung geworden.

Kürzlich fragten mich einige Freunde, wie man Parameter zwischen Vue-Komponenten weitergibt? Tatsächlich bietet Vue drei Möglichkeiten, Daten zwischen Komponenten zu übertragen (Requisiten, Komponentenkommunikation, Slot). Diesmal ist die erste Möglichkeit wie folgt:

a Inhalt der übergeordneten Komponente:

B-Unterkomponenten-Import b-Formular 'b.vue' einführen

components: {'b-p': b} // 注册，只能在当前a组件里使用
<b-p :propsname=&#39;datas(向子组件传递的参数)&#39;></b-p>

B-Unterkomponenten-Inhalt:

<template> <p>{{propsname}}</p> </template>
export default{
props: [&#39;propsname&#39;],
data(){}
}

Solange sich der Wert der Daten in einer Komponente ständig ändert, in b Die Requisiten in der Unterkomponente überwachen die Änderungen im Requisitennamen in Echtzeit und rendern entsprechend auf der Seite. Die Verwendungsmethode ist ebenfalls {{propsname}}.

PS: Lassen Sie mich Ihnen vorstellen, wie Sie Werte (Requisiten) zwischen übergeordneten und untergeordneten Vue-Komponenten übergeben

Definieren Sie zunächst ein untergeordnetes Element Komponente und registrieren Sie sie in den Komponenten-Requisiten

<template>
  <p>
    <p>{{message}}(子组件)</p>
  </p>
</template>
<script>
export default {
  props: {
    message: String //定义传值的类型<br>  }
}
</script>
<style>
</style>

Führen Sie in der übergeordneten Komponente die untergeordnete Komponente ein und übergeben Sie den erforderlichen Wert in der untergeordneten Komponente

<template>
  <p>
    <p>父组件</p>
    <child :message="parentMsg"></child> 
  </p>
</template>
<script>
import child from &#39;./child&#39; //引入child组件
export default {
  data() {
      return {
        parentMsg: &#39;a message from parent&#39; //在data中定义需要传入的值
      }
    },
    components: {
      child
    }
}
</script>
<style>
</style>

Diese Methode kann nur von der übergeordneten Komponente übergeben werden an die untergeordnete Komponente, und die untergeordnete Komponente kann die übergeordnete Komponente nicht aktualisieren. Die darin enthaltenen Daten habe ich für Sie zusammengestellt. Ich hoffe, dass sie Ihnen in Zukunft hilfreich sein werden.

Verwandte Artikel:

Das obige ist der detaillierte Inhalt vonSo übergeben Sie Daten von der übergeordneten Komponente an die untergeordnete Komponente in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!