So übergeben Sie Parameter an irrelevante Komponenten in Vue

In Vue können Komponenten normalerweise Daten über Requisitenattribute weitergeben, aber manchmal müssen wir Daten zwischen nicht verwandten Komponenten weitergeben.

Zum Beispiel müssen wir möglicherweise Daten von einer Komponente an eine andere weitergeben, aber die beiden Komponenten haben möglicherweise keine Verbindung. In diesem Fall können wir das Ereignissystem von Vue verwenden, um die Kommunikation zwischen nicht übergeordneten und untergeordneten Komponenten zu implementieren. Konkret können wir die Methoden $on und $emit in Vue verwenden, um Ereignisse zu senden und zu empfangen. Die

$on-Methode wird verwendet, um ein benutzerdefiniertes Ereignis in der aktuellen Komponente zu registrieren. Wenn das Ereignis ausgelöst wird, kann die aktuelle Komponente den entsprechenden Vorgang ausführen. Die Methode $emit wird verwendet, um ein benutzerdefiniertes Ereignis auszulösen und die angegebenen Parameter an alle Komponenten zu übergeben, die das Ereignis überwachen.

Das Beispiel sieht wie folgt aus:

<!-- 组件A -->
<template>
  <div>
    <!-- 触发事件 -->
    <button @click="sendDataToB">传递数据给组件B</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToB() {
      // 发送事件
      this.$emit('sendData', '这是来自组件A的数据')
    }
  }
}
</script>

<!-- 组件B -->
<template>
  <div>
    <!-- 监听事件并接收数据 -->
    <div>收到的数据：{{ receivedData }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedData: ''
    }
  },
  mounted() {
    // 监听事件
    this.$on('sendData', (data) => {
      this.receivedData = data
    })
  }
}
</script>

In diesem Beispiel haben wir ein benutzerdefiniertes Ereignis mit dem Namen „sendData“ in Komponente A registriert und die Methode $emit verwendet, um das Ereignis auszulösen. Die Methode $emit übergibt die Zeichenfolge „Dies sind Daten von Komponente A“ als Parameter an alle Komponenten, die das Ereignis abhören.

In Komponente B verwenden wir die $on-Methode im gemounteten Lebenszyklus-Hook, um das Ereignis „sendData“ abzuhören und die empfangenen Daten von Komponente B in der Antwortfunktion zu aktualisieren. Zu diesem Zeitpunkt kann Komponente B die von Komponente A übergebenen Daten empfangen.

Es ist zu beachten, dass die Kommunikation zwischen nicht übergeordneten und untergeordneten Komponenten mithilfe eines speziellen Ereignissystems implementiert werden muss. Dies kann eine unendliche Verschachtelung von Puppen zwischen Komponenten vermeiden und die Wartung des Codes erschweren. Daher sollten wir in der tatsächlichen Entwicklung versuchen, die Kommunikation zwischen Komponenten auf Eltern-Kind-Komponenten zu beschränken.

Das obige ist der detaillierte Inhalt vonSo übergeben Sie Parameter an irrelevante Komponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!