Inhaltsverzeichnis
Zunächst übermittelt der Elternteil Daten an das Kind
1. Übermittlung festgelegter spezifischer Daten
3. Die untergeordnete Komponente ruft die übergeordnete Komponente auf
Zweitens übermittelt das Kind Daten an das Elternteil
1. Verwenden Sie benutzerdefinierte Ereignisse
3. Das gleiche Preisniveau und der gleiche Datentransfer zwischen allen Komponenten
Vorwort
Vorne haben wir die Komponenten von vue und die hierarchische Beziehung zwischen den Komponenten von vue bereits verstanden. Dies ist im vorherigen Blog des Bloggers, wenn Sie interessiert sind, können Sie fortfahren. Die Adresse lautet:
Dieser Artikel schreibt und zeichnet hauptsächlich den Modus und die Methode der Kommunikation zwischen Komponenten auf. Unsere Komponenten können nur ihre eigenen Eigenschaften und Methoden aufrufen und können nicht die Eigenschaften und Methoden anderer Komponenten aufrufen, aber wenn sie aufgerufen werden, dann Es ist die Datenkommunikation zu verwenden , damit die Eigenschaften und Methoden der Komponente aufgerufen werden können.
Die hervorstechendsten Merkmale unserer vue-Komponenten sind der komponentenübergreifende Datenfluss, die Kommunikation mit benutzerdefinierten Ereignissen und die Integration von Build-Tools.
Zunächst übermittelt der Elternteil Daten an das Kind
1. Übermittlung festgelegter spezifischer Daten
Wir verstehen durch ein Codebeispiel, dass die übergeordnete Komponente bestimmte Daten an die untergeordnete Komponente übergibt.
Codebeispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<title>层级关系</title>
</head>
<body>
<div id="app">
<child msg="**大学"></child>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
Vue.component('child',{
props:['msg'],
template:
`<h1>{
{msg}}学生教务系统</h1>`
});
var vm = new Vue({
el:"#app",
})
</script>
</body>
</html>Operationsergebnis:
Wir sehen eine Schnittstelle wie diese: Wenn eine Eigenschaft msg in der untergeordneten Komponente durch props: ['msg'] definiert wird, ruft die Root-Komponente die untergeordnete Komponente auf, übergibt die '**University' in der Eigenschaft msg und pass Geben Sie diese Daten an die untergeordnete Komponente, damit diese Komponente angezeigt werden kann, da dieser Wert ein fester und spezifischer Wert ist und nicht geändert werden kann. Daher wird diese Methode auch als wörtliche Wertübertragung bezeichnet.
2. Dynamische Grammatik
Die dynamische Syntax ist eigentlich sehr einfach. Sie ähnelt der Verwendung von v-bind, um HTML-Features an einen Ausdruck zu binden. Sie können v-bind verwenden, um dynamische Props an die Daten der übergeordneten Komponente zu binden. Wenn sich die Daten der übergeordneten Komponente ändern, werden diese Änderungen an die untergeordnete Komponente gesendet. Das ist nicht schwer zu verstehen, schauen wir uns etwas Code an:
Codebeispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<title>组件之间的传递</title>
</head>
<body>
<div id="app">
<child v-bind:msg='stage':open='open'></child>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
Vue.component('child',{
template:
`
<div><h1>{
{msg}}学生教务系统</h1>
<h2 v-show='open'>放假了！进不了！！！</h2></div>`,
props:['msg','open'],
});
var vm = new Vue({
el:"#app",
data:{
stage:"放假",
open:true
}
})
</script>
</body>
</html>Operationsergebnis:
Wir können sehen, dass in der untergeordneten Komponente die Attribute von zwei Bildungsverwaltungssystemen, msg und open, definiert wurden. Die untergeordnete Komponente wurde in der übergeordneten Komponente verwendet, und die v-bind-Anweisung wird verwendet, um unsere beiden Attribute daran zu binden Daten von der übergeordneten Komponente empfangen. Zwischen unseren Komponenten können wir Requisiten verwenden, um Validierungsanforderungen zu spezifizieren. Zu diesem Zeitpunkt ist der von Requisiten erhaltene Wert der Wert eines Objekts.
3. Die untergeordnete Komponente ruft die übergeordnete Komponente auf
Hier können wir erklären, dass, wenn die übergeordnete Komponente unsere untergeordnete Komponente aufruft, indem sie das Ereignis bindet, diese Methode an die untergeordnete Komponente übergeben wird und das Ereignis durch $emit in der untergeordneten Komponente ausgelöst werden kann. Das ist nicht schwer zu verstehen, wir können es durch Code verstehen:
Codebeispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<title>组件之间的传递</title>
</head>
<body>
<div id="app">
<child v-on:fmethod="show"></child>
<p>{
{msg}}</p>
</div>
<template id="n1">
<div><button @click="myclick">调用父组件</button></div>
</template>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var clild = {
template:"#n1",
methods:{
myclick(){this.$emit('fmethod');}
}
};
var vm = new Vue({
el:"#app",
data:{msg:""},
methods:{
show(){this.msg="这里是父级组件的方法";}
},
components:{child:clild}
})
</script>
</body>
</html>Laufendes Ergebnis: Wenn wir klicken, kann die Show-Methode der übergeordneten Komponente ausgeführt werden. folgendermaßen:
Zweitens übermittelt das Kind Daten an das Elternteil
1. Verwenden Sie benutzerdefinierte Ereignisse
Wenn die übergeordnete Komponente die untergeordnete Komponente aufruft, binden wir zuerst ein benutzerdefiniertes Ereignis durch eine v-on-Anweisung. In der untergeordneten Komponente können wir dieses Funktionsereignis durch $emit auslösen und dann das Funktionsereignis in der übergeordneten Komponente definieren. Die Methode der Verarbeitung der Funktion, Übergabe der Daten an die Elternkomponente durch solche Übergabeparameter, dies ist immer noch sehr einfach und verständlich, wir verstehen unsere Definition durch das Codebeispiel,
Beispielcode:
<!DOCTYPE html>
<html lang="en">
<head>
<title>组件之间的传递</title>
</head>
<body>
<div id="app">
<child v-on:fmethod="show"></child>
<p>{
{msg}}</p>
</div>
<template id="n1">
<div><button @click="myclick">调用父组件的方法</button></div>
</template>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var clild = {
template:"#n1",
data:function(){return {msg:"这里是来自子级组件的数据"}},
methods:{
myclick(){this.$emit('fmethod',this.msg);}
}
};
var vm = new Vue({
el:"#app",
data:{msg:""},
methods:{
show(data){this.msg=data;}
},
components:{child:clild}
})
</script>
</body>
</html>Operationsergebnis:
Wenn auf die Schaltfläche geklickt wird, wird die Methode myclick ausgeführt.Der Befehl this.$emit in dieser Methode löst das Ereignis fmethod aus, ruft die Methode show in der übergeordneten Komponente auf und übergibt dann this.msg als Argument. folgendermaßen:
2. Verwendung von $refs
Wenn dieses Konzept verwendet wird, können wir wissen, dass das ref-Attribut beim Aufrufen der untergeordneten Komponente verwendet wird, und die Instanz der Komponente, die dem Attributwert von ref entspricht, wird über $refs abgerufen.Nach dem Abrufen der übergeordneten Komponente kann die untergeordnete Komponente dies tun verwendet werden, um die Daten der untergeordneten Komponente zu steuern. Gleichzeitig können Sie auch die Methode von Unterkomponenten erhalten. Das Konzept ist sehr einfach. Wir können es durch Code verstehen:
Beispielcode:
<!DOCTYPE html>
<html lang="en">
<head>
<title>组件之间的传递</title>
</head>
<body>
<div id="app">
<p>{
{msg}}</p><button v-on:click="My_click()">访问子组件的数据和方法</button>
<child ref="child1"></child>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var clild = {
template:"#n1",
data:function(){return {msg:"这里是来自子级组件的数据"}},
methods:{
myclick(){this.$emit('fmethod',this.msg);}
}
};
var vm = new Vue({
el:"#app",
data:{msg:"根组件data"},
methods:{
My_click(){
console.log(this.$emit.child.msg1);
this.$refs.child.show("已经被调用");
}
},
components:{
child:{
template:'<p>{
{msg1}}</p>',
data:function(){
return {msg1:"子组件数据"}
},
methods:{
show(data){
console.log("子组件方法"+data)
}
}
}
}
})
</script>
</body>
</html>Operationsergebnis:
3. Das gleiche Preisniveau und der gleiche Datentransfer zwischen allen Komponenten
Wir kennen die Datenübertragung bereits vor den Eltern- und Kindkomponenten, also müssen wir jetzt die Geschwisterkomponenten verstehen, der Zeitbus kann für die Kommunikation zwischen beliebigen Komponenten verwendet werden, um die Methode zur Lösung der ebenenübergreifenden Übertragung zu verwenden.
Im Programmcode müssen wir zunächst den Event-Bus definieren: Von den beiden Komponenten, die den Event-Bus zur Datenübertragung nutzen, kann eine Komponente die Listening-Time nutzen, die andere Komponente das Trigger-Event. Wir können es immer noch durch einen Beispielcode lernen:
Beispielcode:
<!DOCTYPE html>
<html lang="en">
<head>
<title>组件之间的传递</title>
</head>
<body>
<div id="app">
<component-one></component-one>
<component-two></component-two>
</div>
<template id="n1">
<div style="border: 1px solid blue;padding: 10px;margin: 10px;">
我是哥哥，想要获取到弟弟的数据:{
{msg1}}
</div>
</template>
<template id="n2">
<div style="border: 1px solid blue;padding: 10px;margin: 10px;">
我是弟弟
<button @click="send">把弟弟的数据传给哥哥</button>
</div>
</template>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var bus = new Vue({});
var vm = new Vue({
el:"#app",
components:{
"component-one":{
template:'#n1',
data(){
return {msg1:""}
},
mounted(){
bus.$on("data-transmit",msgs2=>{
this.msg1 = msgs2
})
},
},
"component-two":{
template:"#n2",
data(){return {msg2:"我是弟弟的数据"}},
methods:{
send(){
bus.$emit("data-transmit",this.msg2);
}
}
}
}
})
</script>
</body>
</html>
Laufendes Ergebnis: Klicken Sie auf die Schaltfläche, um die Daten des jüngeren Bruders (Komponente) auf den älteren Bruder (Komponente) zu übertragen.
