So nutzen Sie die Daten innerhalb der Komponente und die Requisiten der Komponentenparameter, um eine Datenübertragung in Vue zu erreichen

Vue ist ein sehr beliebtes Front-End-Entwicklungsframework, bei dem Komponenten sehr wichtige Bausteine ​​sind. In Vue können die Daten innerhalb der Komponente und die Requisiten der Komponentenparameter gut zusammen verwendet werden, um eine Datenübertragung zu erreichen.

In Vue-Komponenten sind Daten die Zustandsdaten innerhalb der Komponente. Es kann mit allen Methoden in der Komponente darauf zugegriffen und geändert werden. Um Daten innerhalb einer Komponente zu verwenden, können Sie sie auf folgende Weise deklarieren:

  export default {
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }

In diesem Beispiel deklarieren wir Daten namens Nachricht. Auf diese Daten kann mit allen Methoden innerhalb der Komponente zugegriffen und sie geändert werden.

Aber was ist, wenn wir Daten zwischen Komponenten austauschen möchten? Zu diesem Zeitpunkt können wir Komponentenparameter-Requisiten verwenden, um Daten zu übergeben. Mithilfe von Requisiten können wir Daten zwischen Komponenten weitergeben.

Hier ist ein Beispiel, das zeigt, wie Requisiten zum Übergeben von Daten in einer Komponente verwendet werden:

  // 父组件
  <template>
    <div>
      <child-component message="Hello Vue!"></child-component>
    </div>
  </template>

  // 子组件
  <template>
    <div>
      <p>{{ message }}</p>
    </div>
  </template>

  <script>
  export default {
    props: ['message']
  }
  </script>

In diesem Beispiel übergibt die übergeordnete Komponente eine Requisite namens message mit dem Wert „Hello Vue!“ an die untergeordnete Komponente. In der Vorlage der untergeordneten Komponente verwenden wir {{message}}, um den Wert dieser Requisiten anzuzeigen.

Aber was ist, wenn wir den Wert dieser Requisiten in der untergeordneten Komponente ändern möchten? Zu diesem Zeitpunkt können wir den .sync-Modifizierer in Vue verwenden, um Requisiten zu übergeben und eine bidirektionale Bindung zu implementieren:

  // 父组件
  <template>
    <div>
      <child-component :message.sync="message"></child-component>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }
  </script>

  // 子组件
  <template>
    <div>
      <input v-model="message">
      <p>{{ message }}</p>
    </div>
  </template>

  <script>
  export default {
    props: ['message', 'update:message']
  }
  </script>

In diesem Beispiel übergeben wir eine Requisite namens message in der übergeordneten Komponente und implementieren sie mithilfe des .sync-Modifikators Two- Wegebindung. In der untergeordneten Komponente verwenden wir das V-Modell, um die Nachricht an eine Eingabe zu binden und ihren Wert innerhalb der Komponente zu ändern.

Es ist jedoch zu beachten, dass Sie, wenn Sie den Wert von Requisiten in einer untergeordneten Komponente ändern möchten, auch ein übergeordnetes Komponentenereignis von update:propName definieren und $emit verwenden müssen, um dieses Ereignis in der untergeordneten Komponente auszulösen. In diesem Beispiel definieren wir ein Ereignis namens update:message und verwenden $emit in der untergeordneten Komponente, um den Wert von message in der übergeordneten Komponente zu aktualisieren.

Zusammenfassend lässt sich sagen, dass wir durch die Daten innerhalb der Komponente und die Komponentenparameter-Requisiten problemlos die Datenübertragung zwischen Komponenten in Vue implementieren können. Wenn Sie es richtig verwenden, wird die Übergabe von Daten zwischen Komponenten sehr einfach und Ihr Code lässt sich einfacher warten.

Das obige ist der detaillierte Inhalt vonSo nutzen Sie die Daten innerhalb der Komponente und die Requisiten der Komponentenparameter, um eine Datenübertragung in Vue zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!