Comment utiliser les composants vue pour le transfert de données

Cette fois, je vais vous montrer comment utiliser les composants vue pour le transfert de données, et quelles sont les précautions pour utiliser les composants vue pour le transfert de données. Voici des cas pratiques, jetons un coup d'œil.

Les portées des composants de Vue sont toutes isolées et ne permettent pas de références directes aux données du composant parent dans le modèle d'un composant enfant. Des méthodes spécifiques doivent être utilisées pour transférer les données entre les composants. Il existe environ trois situations dans lesquelles les données sont transmises entre les composants :

Les composants parents transmettent des données aux composants enfants et les données sont transmises via des accessoires.

Le composant enfant transmet les données au composant parent et transmet les données via des événements.

Transférez des données entre deux composants frères via le bus d'événements.

1. Le composant parent transmet les données au composant enfant

Partie sous-composant :

<template>
  <p class="child">
    {{ msg }}
  </p>
</template>
<script>
export default {
 name: 'child',
 data(){
  return {
  
  }
 },
 props: ['msg']
</script>

dans Child.vue, msg est une variable définie dans data. Utilisez props : ['msg'] pour obtenir la valeur de msg du composant parent

Partie du composant parent :

<template>
  <p class="child">
    child
    <child :msg="message"></child>
  </p>
</template>
<script>
import child from './child.vue'
export default {
 name: 'parent',
 components: { child },
 data () {
  return {
   message: 'hello vue'
  }
 }
}
</script>

lors de l'appel Lors de la création d'un composant, utilisez v-bind pour lier la valeur de msg à la variable message définie dans parent.vue, afin que la valeur du message dans parent.vue puisse être transmise à child.vue.

Flux de données unique

Lorsque le message du composant parent change, le composant enfant mettra automatiquement à jour la

vue. Mais dans les composants enfants, nous ne voulons pas modifier les accessoires. Si vous devez modifier ces données, vous pouvez utiliser la méthode suivante :

Méthode 1 : Attribuez prop à une variable locale, puis modifiez la variable locale si vous devez la modifier, sans affecter prop

export default {
  data(){
    return {
      newMessage: null
    } 
  },
  props: ['message'],
  created(){
    this.newMessage = this.message;
  }
}

Méthode 2 : Traiter l'accessoire dans la

propriété

export default {
  props: ['message'],
  computed: {
    newMessage(){
      return this.message + ' 哈哈哈';
    }
  }
}

2. Le composant enfant transmet les données au composant parent.

Le sous-composant transmet principalement les données à la partie

du sous-composant parent par la pratique : Dans le html du

<template>
  <p class="child">
   <span>用户名：</span>
   <input v-model="username" @change="sendUser" />
  </p>
</template>

sous -component, lorsque la valeur dans l'entrée apparaît. Lors du changement, transmettez le nom d'utilisateur à parent.vue.

déclare d'abord une méthode sendUser et utilise l'événement change

pour appeler sendUser.

<script>
 export default {
  name: 'parend',
  data () {
   return {
     username: ''
   }
  },
  methods: {
   sendUser () {
    this.$emit('changeName', this.username)
   }
  }
}
</script>

Dans sendUser, utilisez $emit pour parcourir l'événement changeName et renvoyer this.name, où changeName est un événement personnalisé qui fonctionne comme un relais, et this.name sera transmis via cet événement au composant parent.

Partie composant parent :

<template>
  <p class="parent">
    <child @changeName="getUser"></child>
    <p>用户名：{{user}}</p>
  </p>
</template>

déclare une méthode getUser dans le composant parent, utilise l'événement changeName pour appeler la méthode getUser et obtient le paramètre nom d'utilisateur transmis par le composant enfant

<script>
import child from './child.vue'
export default {
 name: 'parent',
 components: { child },
 data () {
  return {
   user: ''
  }
 },
 methods: {
  getUser(data) {
   this.user = data
  }
 }
}
</script>

Le paramètre msg dans la méthode getUser est le paramètre uesrname transmis par le sous-composant.

3. Transfert de données entre composants de même niveau

Parfois, deux composants doivent également communiquer (relation non parent-enfant). Bien sûr, Vue2.0 fournit Vuex, mais dans des scénarios simples, une instance Vue vide peut être utilisée comme bus d'événements central.

<template>
  <p id="app">
    <c1></c1>  //组件1
    <c2></c2> //组件2
  </p>
</template>

Dans le composant c1 :

<template>
  <p class="c1">
    page
    <button @click="changeMsg">click</button>
  </p>
</template>
<script>
var Bus = new Vue(); //为了方便将Bus（空vue）定义在一个组件中，在实际的运用中一般会新建一Bus.js
export default {
 name: 'c1',
 data () {
  return {
   message: 'hi'
  }
 },
 methods: {
  changeMsg () {  //点击按钮，将this.message传递给c2
   bus.$emit('sendMsg', this.message)
  }
 }
}
</script>

Dans le composant c2 :

<template>
  <p class="c2">
    {{msg}}
  </p>
</template>
<script>
var Bus = new Vue();
export default {
 name: 'c2',
 data () {
  return {
   msg: ''
  }
 },
 created () {
  bus.$on('sendMsg',(data)=>{  //data即为c1组件中的message
   this.msg = data
  })
 }
}
</script>

En application réelle, le bus est généralement extrait :

//Bus.js
import Vue from 'vue'
const Bus = new Vue()
expore default Bus

Référencé lors de l'appel du composant (import Bus depuis './Bus.js')

Cependant, dans cette manière d'introduction, après packaging du webpack, la portée locale du Bus peut apparaître, que c'est-à-dire qu'une référence sont deux bus différents, ce qui entraîne une communication normale

Application réelle :

Injecter le bus dans l'objet racine Vue

import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
  el:'#app',
　　 data:{
　　　　Bus
  }　　
})

Dans le sous-composant via

Appelez this.$root.Bus.$on(),this.$root.Bus.$emit()

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser WebPack pour configurer la vue multi-page

Comment utiliser Node.js environnement bac à sable

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!