Dieses Mal zeige ich Ihnen, wie Sie Vue-Komponenten für die Datenübertragung verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Vue-Komponenten für die Datenübertragung gelten. Hier sind praktische Fälle, schauen wir uns das an.
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>Nach dem Login kopieren
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>Nach dem Login kopieren
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;
}
}Nach dem Login kopieren
Methode 2: Verarbeiten Sie die Requisite im berechneten Attribut
export default {
props: ['message'],
computed: {
newMessage(){
return this.message + ' 哈哈哈';
}
}
}Nach dem Login kopieren
2. Die untergeordnete Komponente übergibt Daten an die übergeordnete Komponente
Die Unterkomponente übergibt Daten hauptsächlich durch Übung an den
-Unterkomponententeil der übergeordneten Komponente: Im HTML der
<template>
<p class="child">
<span>用户名：</span>
<input v-model="username" @change="sendUser" />
</p>
</template>
Nach dem Login kopieren
-Unterkomponente, wenn der Wert in der Wenn sich die Eingabe ändert, 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>Nach dem Login kopieren
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>Nach dem Login kopieren
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>Nach dem Login kopieren
ü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>
Nach dem Login kopieren
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>Nach dem Login kopieren
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>Nach dem Login kopieren
In der tatsächlichen Anwendung wird der Bus im Allgemeinen extrahiert:
//Bus.js
import Vue from 'vue'
const Bus = new Vue()
expore default Bus
Nach dem Login kopieren
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
}
})Nach dem Login kopieren
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:
So verwenden Sie WebPack, um Vue Multi-Page zu konfigurieren
So verwenden Sie Node.js Sandbox-Umgebung
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue-Komponenten für die Datenübertragung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
