Zu den Methoden zur Wertübergabe gehören: props und „$emit“, „$attrs“ und „$listeners“, Central Event Bus, V-Model, Provide and Inject, „$parent“ und „$children“, vuex, localStorage/ Sitzung.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.
Für Vue ist die Nachrichtenübermittlung zwischen Komponenten sehr wichtig. Das Folgende ist meine Zusammenfassung gängiger Methoden der Nachrichtenübermittlung zwischen Komponenten.
Props und $ emit (häufig verwendet)
$ attrs und $ Hörer
Central Event Bus (Nicht-Parent-Kind-Inter-Komponenten-Kommunikation)
V-Model
-
bereitstellen und injizieren
$parent und $children
vuex
props und $emit
Die übergeordnete Komponente leitet Daten über prop an die untergeordnete Komponente weiter , und die Die untergeordnete Komponente übergibt die Daten an die übergeordnete Komponente. Dies geschieht durch das Auslösen von Ereignissen über $emit.
Vue.component('child',{ data(){ return { mymessage:this.message } }, template:` <div> <input type="text" v-model="mymessage" @input="passData(mymessage)"> </div> `, props:['message'],//设置props属性值，得到父组件传递过来的数据 methods:{ passData(val){ //触发父组件中的事件，向父组件传值 this.$emit('getChildData',val) } } }) Vue.component('parent',{ template:` <div> <p>this is parent compoent!</p> <child :message="message" v-on:getChildData="getChildData"></child> </div> `, data(){ return { message:'hello' } }, methods:{ //执行子组件触发的事件 getChildData(val){ console.log(val) } } })Nach dem Login kopieren
Im obigen Beispiel gibt es übergeordnete und untergeordnete Komponenten.
Die übergeordnete Komponente übergibt die Nachrichtendaten an die untergeordnete Komponente und bindet über v-on ein getChildData-Ereignis, um auf das Triggerereignis der untergeordneten Komponente zu warten.
Die untergeordnete Komponente erhält die relevanten Nachrichtendaten props und übergibt dies schließlich. $emit hat das getChildData-Ereignis ausgelöst
$attrs und $listeners
Die erste Möglichkeit, die Datenübertragung zwischen übergeordneten und untergeordneten Komponenten zu handhaben, weist ein Problem auf: Wenn eine untergeordnete Komponente B vorhanden ist Übergeordnete Komponente A, Komponente B befindet sich darunter. Es gibt Komponente C. Was ist, wenn Komponente A Daten an Komponente C übergeben möchte? Wenn wir die erste Methode anwenden, müssen wir Komponente A die Nachricht über Prop an Komponente B weiterleiten lassen, und Komponente B leitet die Nachricht über Prop an Komponente C weiter. Wenn zwischen Komponente A und Komponente C mehr Komponenten vorhanden sind, verwenden Sie diese Methode sehr kompliziert. Vue 2.4 hat $attrs und $listeners bereitgestellt, um dieses Problem zu lösen, sodass Komponenten A Nachrichten an Komponente C weiterleiten können.
Vue.component('C',{
template:`
<div>
<input type="text" v-model="$attrs.messagec" @input="passCData($attrs.messagec)"> </div>
`,
methods:{
passCData(val){
//触发父组件A中的事件
this.$emit('getCData',val)
}
}
})
Vue.component('B',{
data(){
return {
mymessage:this.message
}
},
template:`
<div>
<input type="text" v-model="mymessage" @input="passData(mymessage)">
<!-- C组件中能直接触发getCData的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
<!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） -->
<C v-bind="$attrs" v-on="$listeners"></C>
</div>
`,
props:['message'],//得到父组件传递过来的数据
methods:{
passData(val){
//触发父组件中的事件
this.$emit('getChildData',val)
}
}
})
Vue.component('A',{
template:`
<div>
<p>this is parent compoent!</p>
<B :messagec="messagec" :message="message" v-on:getCData="getCData" v-on:getChildData="getChildData(message)"></B>
</div>
`,
data(){
return {
message:'hello',
messagec:'hello c' //传递给c组件的数据
}
},
methods:{
getChildData(val){
console.log('这是来自B组件的数据')
},
//执行C子组件触发的事件
getCData(val){
console.log("这是来自C组件的数据："+val)
}
}
})Nach dem Login kopieren
Zentraler Ereignisbus
Die beiden oben genannten Methoden befassen sich mit der Datenübertragung zwischen übergeordneten und untergeordneten Komponenten. Was aber, wenn die beiden Komponenten nicht in einer Eltern-Kind-Beziehung stehen? In diesem Fall kann ein zentraler Veranstaltungsbus genutzt werden. Erstellen Sie ein neues Vue-Ereignisbusobjekt, lösen Sie dann das Ereignis über bus.$emit aus, und bus.$on wartet auf das ausgelöste Ereignis.
Vue.component('brother1',{
data(){ return {
mymessage:'hello brother1'
}
},
template:` <p>
<p>this is brother1 compoent!</p>
<input type="text" v-model="mymessage" @input="passData(mymessage)">
</p> `,
methods:{
passData(val){ //触发全局事件globalEvent
bus.$emit('globalEvent',val)
}
}
})
Vue.component('brother2',{
template:` <p>
<p>this is brother2 compoent!</p>
<p>brother1传递过来的数据：{{brothermessage}}</p>
</p> `,
data(){ return {
mymessage:'hello brother2',
brothermessage:''
}
},
mounted(){ //绑定全局事件globalEvent
bus.$on('globalEvent',(val)=>{ this.brothermessage=val;
})
}
}) //中央事件总线
var bus=new Vue(); var app=new Vue({
el:'#app',
template:` <p>
<brother1></brother1>
<brother2></brother2>
</p> `
})Nach dem Login kopieren
Bereitstellen und Injizieren
In der 2.2.0+2.2.0+ 版本中添加加了 provide 和 inject 选项。他们成对出现，用于父级组件向下传递数据。
父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。
Vue.component('child',{
inject:['for'],//得到父组件传递过来的数据
data(){
return {
mymessage:this.for
}
},
template:`})
Vue.component('parent',{
template:`this is parent compoent!`,
provide:{
for:'test'
},
data(){
return {
message:'hello'
}
}
})Nach dem Login kopieren
v-model
父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit(‘input',val)自动修改v-model绑定的值
Vue.component('child',{
props:{
value:String, //v-model会自动传递一个字段为value的prop属性 },
data(){ return {
mymessage:this.value
}
},
methods:{
changeValue(){ this.$emit('input',this.mymessage);//通过如此调用可以改变父组件上v-model绑定的值 }
},
template:` <p>
<input type="text" v-model="mymessage" @change="changeValue">
</p> })
Vue.component('parent',{
template:` <p>
<p>this is parent compoent!</p>
<p>{{message}}</p>
<child v-model="message"></child>
</p> `,
data(){ return {
message:'hello'
}
}
}) var app=new Vue({
el:'#app',
template:` <p>
<parent></parent>
</p> `
})Nach dem Login kopieren
$parent和$children
在组件内部可以直接通过子组件$parent对父组件进行操作，父组件通过$children对子组件进行操作.
Vue.component('child',{
props:{
value:String, //v-model会自动传递一个字段为value的prop属性 },
data(){ return {
mymessage:this.value
}
},
methods:{
changeValue(){ this.$parent.message = this.mymessage;//通过如此调用可以改变父组件的值 }
},
template:` <p>
<input type="text" v-model="mymessage" @change="changeValue">
</p> })
Vue.component('parent',{
template:` <p>
<p>this is parent compoent!</p>
<button @click="changeChildValue">test</button >
<child></child>
</p> `,
methods:{
changeChildValue(){ this.$children[0].mymessage = 'hello';
}
},
data(){ return {
message:'hello'
}
}
}) var app=new Vue({
el:'#app',
template:` <p>
<parent></parent>
</p> `
})Nach dem Login kopieren
vuex处理组件之间的数据交互
如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候才有上面这一些方法可能不利于项目的维护，vuex的做法就是将这一些公共的数据抽离出来，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。
localStorage / sessionStorage
这种通信比较简单，缺点是数据和状态比较混乱，不太容易维护。
通过window.localStorage.getItem(key) 获取数据
通过window.localStorage.setItem(key,value) -Version von Vue.js wurden Optionen zum Bereitstellen und Injizieren hinzugefügt. Sie erscheinen paarweise und werden verwendet, um Daten von der übergeordneten Komponente weiterzugeben.
Stellen Sie Variablen über den Anbieter in der übergeordneten Komponente bereit und fügen Sie dann Variablen über inject in die untergeordnete Komponente ein. Egal wie tief die Unterkomponente ist, solange inject aufgerufen wird, können die Daten im Anbieter injiziert werden. Anstatt sich darauf zu beschränken, Daten nur aus dem prop-Attribut der aktuellen übergeordneten Komponente abzurufen, können untergeordnete Komponenten diese aufrufen, solange sie sich im Lebenszyklus der übergeordneten Komponente befinden.
rrreee
V-Modell
Wenn die übergeordnete Komponente den Wert über das V-Modell an die untergeordnete Komponente übergibt, übergibt sie automatisch ein Wertprop-Attribut, das dadurch automatisch in der untergeordneten Komponente geändert wird.$emit( 'input',val) Die durch das V-Modell gebundenen Werte
rrreee🎜🎜$parent und $children🎜🎜🎜🎜 können über die untergeordnete Komponente $parent direkt auf die übergeordnete Komponente angewendet werden, und die übergeordnete Komponente kann darauf angewendet werden die untergeordnete Komponente über $children.🎜rrreee🎜 🎜vuex verwaltet die Dateninteraktion zwischen Komponenten🎜🎜🎜🎜Wenn die Geschäftslogik komplex ist und viele Komponenten gleichzeitig einige gemeinsame Daten verarbeiten müssen, sind die oben genannten Methoden möglicherweise nicht förderlich Die Wartung des Projekts besteht darin, diese gemeinsamen Daten zu extrahieren, und dann können andere Komponenten diese gemeinsamen Daten lesen und schreiben, wodurch der Zweck der Entkopplung erreicht wird. 🎜🎜🎜
localStorage / sessionStorage🎜🎜🎜🎜Diese Art der Kommunikation ist relativ einfach. Der Nachteil besteht darin, dass die Daten und der Status chaotisch und nicht einfach zu pflegen sind. 🎜🎜Daten über window.localStorage.getItem(key) abrufen 🎜🎜Daten über window.localStorage.setItem(key, value) speichern 🎜🎜Bitte verwenden Sie JSON.parse( ) / JSON.stringify() für die Datenformatkonvertierung 🎜🎜localStorage / sessionStorage kann mit vuex kombiniert werden, um eine dauerhafte Datenspeicherung zu erreichen, während mit vuex das Problem der Daten- und Statusverwirrung gelöst wird. 🎜🎜【Verwandte Empfehlung: „🎜vue.js Tutorial🎜“】🎜Das obige ist der detaillierte Inhalt vonWelche 8 Möglichkeiten gibt es, Werte in Vue zu übergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
