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:`
      <div>
        <input type="text" v-model="$attrs.messagec" @input="passCData($attrs.messagec)"> </div>
    `,
    methods:{
      passCData(val){
        //触发父组件A中的事件
        this.$emit(&#39;getCData&#39;,val)
      }
    }
  })
  Vue.component(&#39;B&#39;,{
    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:[&#39;message&#39;],//得到父组件传递过来的数据
    methods:{
      passData(val){
        //触发父组件中的事件
        this.$emit(&#39;getChildData&#39;,val)
      }
    }
  })
  Vue.component(&#39;A&#39;,{
    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:&#39;hello&#39;,
        messagec:&#39;hello c&#39; //传递给c组件的数据
      }
    },
    methods:{
      getChildData(val){
        console.log(&#39;这是来自B组件的数据&#39;)
      },
      //执行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:`      <p>
        <p>this is brother1 compoent!</p>
        <input type="text" v-model="mymessage" @input="passData(mymessage)">
      </p>    `,
    methods:{
      passData(val){        //触发全局事件globalEvent
        bus.$emit(&#39;globalEvent&#39;,val)
      }
    }
  })
  Vue.component(&#39;brother2&#39;,{
    template:`      <p>
        <p>this is brother2 compoent!</p>
        <p>brother1传递过来的数据：{{brothermessage}}</p>
      </p>    `,
    data(){      return {
        mymessage:&#39;hello brother2&#39;,
        brothermessage:&#39;&#39;
      }
    },
    mounted(){      //绑定全局事件globalEvent
      bus.$on(&#39;globalEvent&#39;,(val)=>{        this.brothermessage=val;
      })
    }
  })  //中央事件总线
  var bus=new Vue();  var app=new Vue({
    el:&#39;#app&#39;,
    template:`      <p>
        <brother1></brother1>
        <brother2></brother2>
      </p>    `
  })

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:`      <p>
        <input type="text" v-model="mymessage" @change="changeValue">
      </p>  })
  Vue.component(&#39;parent&#39;,{
    template:`      <p>
        <p>this is parent compoent!</p>
        <p>{{message}}</p>
        <child v-model="message"></child>
      </p>    `,
    data(){      return {
        message:&#39;hello&#39;
      }
    }
  })  var app=new Vue({
    el:&#39;#app&#39;,
    template:`      <p>
        <parent></parent>
      </p>    `
  })

$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!