Quelles sont les 8 façons de transmettre des valeurs dans vue

Les méthodes de transmission de valeurs incluent : les accessoires et "$emit", "$attrs" et "$listeners", le bus d'événements central, le v-model, provide et inject, "$parent" et "$children", vuex, localStorage/session.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Pour Vue, la messagerie entre les composants est très importante. Ce qui suit est mon résumé des méthodes courantes de messagerie entre les composants.

• props et $emit (couramment utilisés)

• $attrs et $listeners

• Central event Bus (communication non parent-enfant)

• v-model

• fournir et injecter

• $parent et $enfants

• vuex
  

props et $emit

Le composant parent transmet les données au composant enfant via prop, et le composant enfant transmet les données au composant parent via l'événement déclencheur $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)      }    }  })

Dans l'exemple ci-dessus, il y a le composant parent parent et le composant enfant enfant.

• Le composant parent transmet les données du message au composant enfant et lie un événement getChildData via v-on pour écouter l'événement déclencheur du composant enfant

   ;

• Le sous-composant obtient les données de message pertinentes via des accessoires et déclenche finalement l'événement getChildData via ceci.$emit

$attrs et $listeners

La première façon de gérer la transmission de données entre les composants parent et enfant pose un problème : s'il y a un composant enfant B sous le composant parent A, et qu'il y a un composant C sous le composant B, que se passe-t-il si le composant A veut transmettre des données au composant C ? Que faire ? Si nous adoptons la première méthode, nous devons laisser le composant A transmettre le message au composant B via prop, et le composant B transmettre le message au composant C via prop ; s'il y a plus de composants entre le composant A et le composant C, alors utilisez cette méthode. très compliqué. Vue 2.4 a fourni $attrs et $listeners pour résoudre ce problème, permettant aux composants A de transmettre des messages au composant C.

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)
      }
    }
  })

Bus d'événements central

Les deux méthodes ci-dessus traitent du transfert de données entre les composants parent et enfant. Que se passe-t-il si les deux composants ne sont pas dans un parent-. relation d'enfant ? Dans ce cas, un bus événementiel central peut être utilisé. Créez un nouvel objet bus d'événement Vue, puis déclenchez l'événement via bus.$emit, et bus.$on écoute l'événement déclenché.

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    `
  })

provide et inject

Ajout des options provide et inject dans la version 2.2.0+ de Vue.js. Ils apparaissent par paires et sont utilisés pour transmettre les données du composant parent.

Fournissez des variables via le fournisseur dans le composant parent, puis injectez des variables via inject dans le composant enfant. Quelle que soit la profondeur du sous-composant, tant que inject est appelé, les données du fournisseur peuvent être injectées. Au lieu de se limiter à obtenir des données uniquement à partir de l'attribut prop du composant parent actuel, les composants enfants peuvent l'appeler tant qu'ils se trouvent dans le cycle de vie du composant parent.

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'
      }
    }
  })

v-model

Lorsque le composant parent transmet la valeur au composant enfant via v-model, il transmettra automatiquement un attribut de prop de valeur et transmettra ceci dans le composant enfant .$emit('input',val) modifie automatiquement la valeur liée au 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 et $children

peut être fait à l'intérieur du composant. Faites fonctionner directement le composant parent via le composant enfant $parent, et le composant parent exploite le composant enfant via $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(&#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 gère l'interaction des données entre les composants

Si la logique métier est complexe et que de nombreux composants doivent traiter certaines données communes en même temps, les méthodes ci-dessus peuvent ne pas être propices à la maintenance du projet. L'approche de Vuex consiste à extraire ces données publiques. , puis d'autres composants peuvent lire et écrire ces données communes, atteignant ainsi l'objectif de découplage.

localStorage / sessionStorage

Ce type de communication est relativement simple. L'inconvénient est que les données et le statut sont compliqués et difficiles à maintenir. .

Obtenez des données via window.localStorage.getItem(key)

Stockez les données via window.localStorage.setItem(key,value) 

Veuillez utiliser JSON.parse() / JSON.stringify() pour la conversion du format de données

localStorage / sessionStorage peut être combiné avec vuex pour obtenir un stockage de données persistant, tout en utilisant vuex pour résoudre le problème de confusion des données et des statuts.

[Recommandation associée : "Tutoriel vue.js"]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!