Detaillierte Erläuterung der Schritte zum Übergeben von Daten in Vue-Komponenten

Dieses Mal werde ich Ihnen die Schritte zum Übergeben von Daten in der Vue-Komponente ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für das Übergeben von Daten in der Vue-Komponente? sehen.

Die Komponentenbereiche von Vue sind alle isoliert und erlauben keine direkten Verweise auf die Daten der übergeordneten Komponente innerhalb der Vorlage einer untergeordneten Komponente. Für die Datenübertragung zwischen Komponenten müssen bestimmte Methoden verwendet werden. Es gibt ungefähr drei Situationen, in denen Daten zwischen Komponenten weitergegeben werden:

Übergeordnete Komponenten geben Daten an untergeordnete Komponenten weiter und Daten werden über Requisiten weitergegeben.

Die untergeordnete Komponente übergibt Daten an die übergeordnete Komponente und leitet die Daten über Ereignisse weiter.

Übertragen Sie Daten zwischen zwei Geschwisterkomponenten über den Ereignisbus.

1. Übergeordnete Komponente übergibt Daten an untergeordnete Komponente

Untergeordneter Komponententeil:

<template>
  <p class="child">
    {{ msg }}
  </p>
</template>
<script>
export default {
 name: 'child',
 data(){
  return {
  
  }
 },
 props: ['msg']
</script>

im untergeordneten Teil. In Vue ist msg eine in Daten definierte Variable. Verwenden Sie props: ['msg'], um den Wert von msg von der übergeordneten Komponente abzurufen.

Übergeordneter Komponententeil:

<template>
  <p class="child">
    child
    <child :msg="message"></child>
  </p>
</template>
<script>
import child from './child.vue'
export default {
 name: 'parent',
 components: { child },
 data () {
  return {
   message: 'hello vue'
  }
 }
}
</script>

Beim Aufrufen der Komponente , Verwenden Sie v-bind, um den Wert von msg an die in parent.vue definierte Variable message zu binden, sodass der Wert von message in parent.vue an child.vue übergeben werden kann.

Einzelner Datenfluss

Wenn sich die Nachricht der übergeordneten Komponente ändert, aktualisiert die untergeordnete Komponente automatisch die Ansicht. In untergeordneten Komponenten möchten wir jedoch keine Requisiten ändern. Wenn Sie diese Daten ändern müssen, können Sie die folgende Methode verwenden:

Methode 1: Weisen Sie prop einer lokalen Variablen zu und ändern Sie dann die lokale Variable, wenn Sie sie ändern müssen, ohne dass sich dies auf prop auswirkt

export default {
  data(){
    return {
      newMessage: null
    } 
  },
  props: ['message'],
  created(){
    this.newMessage = this.message;
  }
}

Methode 2: Verarbeiten Sie die Requisite im berechneten Attribut

export default {
  props: ['message'],
  computed: {
    newMessage(){
      return this.message + ' 哈哈哈';
    }
  }
}

2. Die untergeordnete Komponente übergibt Daten an die übergeordnete Komponente

Die Unterkomponente übergibt hauptsächlich Daten an den

-Unterkomponententeil der übergeordneten Komponente durch Übung: Im HTML der

<template>
  <p class="child">
   <span>用户名：</span>
   <input v-model="username" @change="sendUser" />
  </p>
</template>

-Unterkomponente, wenn der Wert Bei den Eingabeänderungen wird der Benutzername an parent.vue übergeben.

deklariert zunächst eine sendUser-Methode und verwendet das change-Ereignis , um sendUser aufzurufen.

<script>
 export default {
  name: 'parend',
  data () {
   return {
     username: ''
   }
  },
  methods: {
   sendUser () {
    this.$emit('changeName', this.username)
   }
  }
}
</script>

Verwenden Sie in sendUser $emit, um das Ereignis „changeName“ zu durchlaufen und „this.name“ zurückzugeben, wobei „changeName“ ein benutzerdefiniertes Ereignis ist, das wie ein Relay funktioniert. „this.name“ wird über diese Ereigniskomponenten an das übergeordnete Ereignis übergeben.

Übergeordneter Komponententeil:

<template>
  <p class="parent">
    <child @changeName="getUser"></child>
    <p>用户名：{{user}}</p>
  </p>
</template>

deklariert eine getUser-Methode in der übergeordneten Komponente, verwendet das changeName-Ereignis, um die getUser-Methode aufzurufen, und ruft den von der untergeordneten Komponente

<script>
import child from './child.vue'
export default {
 name: 'parent',
 components: { child },
 data () {
  return {
   user: ''
  }
 },
 methods: {
  getUser(data) {
   this.user = data
  }
 }
}
</script>

übergebenen Parameter Benutzernamen ab

Der Parameter msg in der getUser-Methode ist der von der Unterkomponente übergebene Parameter uesrname.

3. Datenübertragung zwischen Komponenten auf derselben Ebene

Manchmal müssen auch zwei Komponenten kommunizieren (Nicht-Eltern-Kind-Beziehung). Natürlich stellt Vue2.0 Vuex bereit, aber in einfachen Szenarien kann eine leere Vue-Instanz als zentraler Event-Bus verwendet werden.

<template>
  <p id="app">
    <c1></c1>  //组件1
    <c2></c2> //组件2
  </p>
</template>

In Komponente c1:

<template>
  <p class="c1">
    page
    <button @click="changeMsg">click</button>
  </p>
</template>
<script>
var Bus = new Vue(); //为了方便将Bus（空vue）定义在一个组件中，在实际的运用中一般会新建一Bus.js
export default {
 name: 'c1',
 data () {
  return {
   message: 'hi'
  }
 },
 methods: {
  changeMsg () {  //点击按钮，将this.message传递给c2
   bus.$emit('sendMsg', this.message)
  }
 }
}
</script>

In Komponente c2:

<template>
  <p class="c2">
    {{msg}}
  </p>
</template>
<script>
var Bus = new Vue();
export default {
 name: 'c2',
 data () {
  return {
   msg: ''
  }
 },
 created () {
  bus.$on('sendMsg',(data)=>{  //data即为c1组件中的message
   this.msg = data
  })
 }
}
</script>

In der tatsächlichen Anwendung wird der Bus im Allgemeinen extrahiert:

//Bus.js
import Vue from 'vue'
const Bus = new Vue()
expore default Bus

Komponentenaufruf Bei Referenzierung (Bus aus './Bus.js' importieren)

Bei dieser Einführung kann jedoch der lokale Umfang des Busses nach dem Packen durch das Webpack angezeigt werden, d. h. es werden zwei verschiedene Busse referenziert in der normalen Kommunikation
Praktische Anwendung:

Bus in das Vue-Stammobjekt einfügen

import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
  el:'#app',
　　 data:{
　　　　Bus
  }　　
})

Rufen Sie es durch this.$root.Bus.$on(),this.$root.Bus.$emit() in der Unterkomponente auf

Ich glaube, ich habe es gesehen it Sie beherrschen die Methode im Fall dieses Artikels. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Analyse der Schritte zur Verwendung benutzerdefinierter Symbolsymbole in Vue

Detaillierte Erläuterung der Schritte zur Verwendung von Vue2x Bildvorschau-Plug-in

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Übergeben von Daten in Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!