Cette fois, je vais vous donner une explication détaillée des étapes de transmission des données dans le composant vue. Quelles sont les précautions pour transmettre des données dans le composant vue. Voici un cas pratique, prenons un. regarder.
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <template>
<p class = "child" >
{{ msg }}
</p>
</template>
<script>
export default {
name: 'child' ,
data(){
return {
}
},
props: [ 'msg' ]
</script>
|
Copier après la connexion
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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>
|
Copier après la connexion
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
1 2 3 4 5 6 7 8 9 10 11 | export default {
data(){
return {
newMessage: null
}
},
props: [ 'message' ],
created(){
this.newMessage = this.message;
}
}
|
Copier après la connexion
Méthode 2 : Traiter l'accessoire dans la
propriété
1 2 3 4 5 6 7 8 | export default {
props: [ 'message' ],
computed: {
newMessage(){
return this.message + ' 哈哈哈' ;
}
}
}
|
Copier après la connexion
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
1 2 3 4 5 6 | <template>
<p class = "child" >
<span>用户名:</span>
<input v-model= "username" @change= "sendUser" />
</p>
</template>
|
Copier après la connexion
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script>
export default {
name: 'parend' ,
data () {
return {
username: ''
}
},
methods: {
sendUser () {
this. $emit ( 'changeName' , this.username)
}
}
}
</script>
|
Copier après la connexion
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 :
1 2 3 4 5 6 | <template>
<p class = "parent" >
<child @changeName= "getUser" ></child>
<p>用户名:{{user}}</p>
</p>
</template>
|
Copier après la connexion
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script>
import child from './child.vue'
export default {
name: 'parent' ,
components: { child },
data () {
return {
user: ''
}
},
methods: {
getUser(data) {
this.user = data
}
}
}
</script>
|
Copier après la connexion
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.
1 2 3 4 5 6 | <template>
<p id= "app" >
<c1></c1>
<c2></c2>
</p>
</template>
|
Copier après la connexion
Dans le composant c1 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <template>
<p class = "c1" >
page
<button @click= "changeMsg" >click</button>
</p>
</template>
<script>
var Bus = new Vue();
export default {
name: 'c1' ,
data () {
return {
message: 'hi'
}
},
methods: {
changeMsg () {
bus. $emit ( 'sendMsg' , this.message)
}
}
}
</script>
|
Copier après la connexion
Dans le composant c2 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <template>
<p class = "c2" >
{{msg}}
</p>
</template>
<script>
var Bus = new Vue();
export default {
name: 'c2' ,
data () {
return {
msg: ''
}
},
created () {
bus. $on ( 'sendMsg' ,(data)=>{
this.msg = data
})
}
}
</script>
|
Copier après la connexion
En application réelle, le bus est généralement extrait :
1 2 3 4 | import Vue from 'vue'
const Bus = new Vue()
expore default Bus
|
Copier après la connexion
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
1 2 3 4 5 6 7 8 | import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
el: '#app' ,
data:{
Bus
}
})
|
Copier après la connexion
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 :
Analyse des étapes d'utilisation des icônes d'icônes personnalisées dans Vue
Explication détaillée des étapes d'utilisation de Vue2x plug-in d'aperçu d'image
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!