Welche Möglichkeiten gibt es, Werte in Vue-Komponenten zu übergeben?

Vue-Komponentenwertübertragungsmethode: 1. Verwenden Sie Requisiten, um Daten über HTML-Attribute an die untergeordnete Komponente weiterzugeben, und die untergeordnete Komponente empfängt die übergebenen Daten über Requisiten. 2. Verwenden Sie $emit, um das Ereignis auszulösen Um die Daten zu übergeben, verwendet die Unterkomponente $emit, um benutzerdefinierte Ereignisse auszulösen, und die übergeordnete Komponente verwendet v-on, um die benutzerdefinierten Ereignisse der Unterkomponente abzuhören. 3. Verwenden Sie Provide/Inject, um Werte über Ebenen hinweg zu übergeben. Die übergeordnete Komponente stellt Daten über „prove“ bereit, und die untergeordnete Komponente verwendet „inject“, um Daten zu empfangen.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Dell g3-Computer.

Der Werttransfer zwischen Vue-Komponenten kann auf drei Arten erreicht werden: Props, $emit und Provide/Inject.

Verwenden Sie Requisiten, um Daten zu übergeben:

Übergeben Sie Daten über HTML-Attribute in der übergeordneten Komponente an untergeordnete Komponenten. Untergeordnete Komponenten empfangen Daten, die von übergeordneten Komponenten über Requisiten übergeben werden.

Übergeordnete Komponente:

<template>
  <div>
    <ChildComponent :message="message"/>
  </div>
</template>
<script>
import ChildComponent from &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: &#39;Hello&#39;
    }
  }
}
</script>

Untergeordnete Komponente:

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

Verwenden Sie $emit, um Ereignisse zur Datenübergabe auszulösen:

Verwenden Sie $emit in untergeordneten Komponenten, um benutzerdefinierte Ereignisse auszulösen und die Daten zu übergeben, die als Parameter übergeben werden müssen. Die übergeordnete Komponente verwendet v-on, um die benutzerdefinierten Ereignisse der untergeordneten Komponente abzuhören und die übergebenen Daten abzurufen.

Übergeordnete Komponente:

<template>
  <div>
    <ChildComponent v-on:custom-event="updateData"/>
  </div>
</template>
<script>
import ChildComponent from &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: &#39;&#39;
    }
  },
  methods: {
    updateData(data) {
      this.message = data;
    }
  }
}
</script>

Untergeordnete Komponente:

<template>
  <div>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
<script>
export default {
  methods: {
    updateMessage() {
      this.$emit(&#39;custom-event&#39;, &#39;New Message&#39;);
    }
  }
}
</script>

Verwenden Sie Provide/Inject für die ebenenübergreifende Wertübertragung:

Stellen Sie Daten über Provide in der übergeordneten Komponente bereit und verwenden Sie dann Inject, um die Daten in der untergeordneten Komponente zu empfangen .

Übergeordnete Komponente:

<template>
  <div>
    <ChildComponent />
  </div>
</template>
<script>
import ChildComponent from &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: &#39;Hello&#39;
    }
  }
}
</script>

Untergeordnete Komponente:

<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
export default {
  inject: [&#39;message&#39;]
}
</script>

Die oben genannten drei Möglichkeiten für Vue-Komponenten, Werte zu übergeben. Je nach Szenario und Bedarf können Sie eine geeignete Methode zum Übertragen von Daten zwischen Komponenten auswählen.

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, Werte in Vue-Komponenten zu übergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!