suchen

Heim  >  Artikel  >  Web-Frontend  >  Welche 8 Möglichkeiten gibt es, Werte in Vue zu übergeben?

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

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-27 17:35:0713689Durchsuche

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.

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

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(&#39;child&#39;,{    data(){      return {        mymessage:this.message      }    },    template:`      <div>        <input type="text" v-model="mymessage" @input="passData(mymessage)"> </div>    `,    props:[&#39;message&#39;],//设置props属性值，得到父组件传递过来的数据    methods:{      passData(val){        //触发父组件中的事件，向父组件传值        this.$emit(&#39;getChildData&#39;,val)      }    }  })  Vue.component(&#39;parent&#39;,{    template:`      <div>        <p>this is parent compoent!</p>        <child :message="message" v-on:getChildData="getChildData"></child>      </div>    `,    data(){      return {        message:&#39;hello&#39;      }    },    methods:{      //执行子组件触发的事件      getChildData(val){        console.log(val)      }    }  })

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:`
      dc6dce4a544fdca2df29d5ac0ea9906b
        7d642c02fff9fdf1e7a3b0ccd8651dae 16b28748ea4df4d9c2150843fecfba68
    `,
    methods:{
      passCData(val){
        //触发父组件A中的事件
        this.$emit('getCData',val)
      }
    }
  })
  Vue.component('B',{
    data(){
      return {
        mymessage:this.message
      }
    },
    template:`
      dc6dce4a544fdca2df29d5ac0ea9906b
        7fd7f75d01cda5f402cb25a0a7de995b
        086635eb7aaa93b3bc42be25ba16f2cd
        d4ef16d70a197139b9a0445162e00bb6
        2b4f3405cb593d7dabb61895b5e4f0275f6acab10c476fc264ba16ac4aa7415c
      16b28748ea4df4d9c2150843fecfba68
    `,
    props:['message'],//得到父组件传递过来的数据
    methods:{
      passData(val){
        //触发父组件中的事件
        this.$emit('getChildData',val)
      }
    }
  })
  Vue.component('A',{
    template:`
      dc6dce4a544fdca2df29d5ac0ea9906b
        e388a4556c0f65e1904146cc1a846beethis is parent compoent!94b3e26ee717c64999d7867364b1b4a3
        e2af931dfa4ed32474136138c8cc6ea341908b66e4bc50a75b443e0dfafd01f9
      16b28748ea4df4d9c2150843fecfba68
    `,
    data(){
      return {
        message:'hello',
        messagec:'hello c' //传递给c组件的数据
      }
    },
    methods:{
      getChildData(val){
        console.log('这是来自B组件的数据')
      },
      //执行C子组件触发的事件
      getCData(val){
        console.log("这是来自C组件的数据："+val)
      }
    }
  })

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:`      e388a4556c0f65e1904146cc1a846bee
        e388a4556c0f65e1904146cc1a846beethis is brother1 compoent!94b3e26ee717c64999d7867364b1b4a3
        7fd7f75d01cda5f402cb25a0a7de995b
      94b3e26ee717c64999d7867364b1b4a3    `,
    methods:{
      passData(val){        //触发全局事件globalEvent
        bus.$emit('globalEvent',val)
      }
    }
  })
  Vue.component('brother2',{
    template:`      e388a4556c0f65e1904146cc1a846bee
        e388a4556c0f65e1904146cc1a846beethis is brother2 compoent!94b3e26ee717c64999d7867364b1b4a3
        e388a4556c0f65e1904146cc1a846beebrother1传递过来的数据：{{brothermessage}}94b3e26ee717c64999d7867364b1b4a3
      94b3e26ee717c64999d7867364b1b4a3    `,
    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:`      e388a4556c0f65e1904146cc1a846bee
        db8e0981216ffea9e11695fcc5f3d159422ba0722828b812771cb3535114ead2
        16c7ea7f21a2f1d37ba1ce836c6f09ccd9f59e38b643491a2fad5c23f0d6a95e
      94b3e26ee717c64999d7867364b1b4a3    `
  })

Bereitstellen und Injizieren

In der 2.2.0+2.2.0+ 版本中添加加了 provide 和 inject 选项。他们成对出现，用于父级组件向下传递数据。

父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。

Vue.component(&#39;child&#39;,{
    inject:[&#39;for&#39;],//得到父组件传递过来的数据
    data(){
      return {
        mymessage:this.for
      }
    },
    template:`})
  Vue.component(&#39;parent&#39;,{
    template:`this is parent compoent!`,
    provide:{
      for:&#39;test&#39;
    },
    data(){
      return {
        message:&#39;hello&#39;
      }
    }
  })

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:`      e388a4556c0f65e1904146cc1a846bee
        6708e6166751e70f627e757fbdf53cce
      94b3e26ee717c64999d7867364b1b4a3  })
  Vue.component('parent',{
    template:`      e388a4556c0f65e1904146cc1a846bee
        e388a4556c0f65e1904146cc1a846beethis is parent compoent!94b3e26ee717c64999d7867364b1b4a3
        e388a4556c0f65e1904146cc1a846bee{{message}}94b3e26ee717c64999d7867364b1b4a3
        2683ad86c93f2ee4c92e7d9b5d7c94a27d4dd9c7239aac360e401efe89cbb393
      94b3e26ee717c64999d7867364b1b4a3    `,
    data(){      return {
        message:'hello'
      }
    }
  })  var app=new Vue({
    el:'#app',
    template:`      e388a4556c0f65e1904146cc1a846bee
        58652436a08d62d32b90566dafe0913cdb7b8d074c72824ed121864240fe4c81
      94b3e26ee717c64999d7867364b1b4a3    `
  })

$parent和$children

在组件内部可以直接通过子组件$parent对父组件进行操作，父组件通过$children对子组件进行操作.

Vue.component(&#39;child&#39;,{
    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(&#39;parent&#39;,{
    template:`      <p>
        <p>this is parent compoent!</p>
        <button @click="changeChildValue">test</button >
        <child></child>
      </p>    `,
    methods:{
      changeChildValue(){        this.$children[0].mymessage = &#39;hello&#39;;
      }
    },
    data(){      return {
        message:&#39;hello&#39;
      }
    }
  })  var app=new Vue({
    el:&#39;#app&#39;,
    template:`      <p>
        <parent></parent>
      </p>    `
  })

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Anhand von Codebeispielen bringen wir Ihnen das V-Modell bei (es lohnt sich, es zu sammeln)!Nächster Artikel：Anhand von Codebeispielen bringen wir Ihnen das V-Modell bei (es lohnt sich, es zu sammeln)!

In Verbindung stehende Artikel

Mehr sehen