Implémentation d'appels mutuels entre les composants vue parent et enfant

Cette fois, je vais vous présenter la mise en œuvre des appels mutuels entre les composants vue parent et enfant. Quelles sont les précautions pour les appels mutuels entre les composants vue parent et enfant. jetez un oeil.

Scénario :

Le composant parent introduit le sous-composant de Télécharger pièce jointe : cliquez sur le composant pour télécharger les exigences correspondantes respectivement Images, les boucles internes des sous-composants peuvent créer plusieurs modules

Les composants parents passent dans des tableaux aux boucles de sous-composants pour créer différents modules de composants. Tous les événements sont à l'intérieur des sous-composants. composants.

Il y a également un bouton de téléchargement d'image en haut de la page du composant parent. Après avoir téléchargé l'image, elle sera affichée dans le premier module :

.

Imagine Idea : Cliquez sur le bouton dans le composant parent pour déclencher la méthode d'upload dans le composant enfant :

Utilisez ref="refName", dans la méthode du composant parent défini sur le composant enfant pour appeler la méthode du composant enfant this.$refs.refName.method

Méthode du composant enfant pour le traitement du téléchargement dans :

 fileClick(index) {
   console.log('子组件的fileClick被调用了')
   console.log('index:  '+index)
   // this.aaa();
   if(!this.fileInfor[index].imgUrl){
   //如果当前框里没有图片,则实现上传
   document.getElementsByClassName('upload_file')[index].click();
  }    
},

Modèle du composant parent

<template>
  <x-button type="submit" class="custom-primary" @click.native="xiechengUpload">上传图片</x-button>
  <up-load :fileInformation="fileInformation" ref="uploadRef"></up-load>
</template>

Définir la méthode dans le méthode du composant parent et transmettre la valeur d'index correspondante

Upload(){
  // console.log('父组件的xiechengUpload被调用了')
  this.$refs.uploadRef.fileClick(0);
},

À ce stade, vous pouvez placer l'image dans le premier module du sous-composant via le bouton de téléchargement.

Voyons comment le composant parent Vue appelle l'événement du sous-composant

Le composant parent Vue transmet des événements/appelle des événements aux composants enfants

Il ne s'agit pas de transmettre des données ( props), il est applicable à Vue 2.0

Méthode 1 : Le composant enfant écoute le composant parent envoyant la méthode

Méthode 2 : Le composant parent appelle la méthode du composant enfant

Enfant composant :

export default {
  mounted: function () {
   this.$nextTick(function () {
    this.$on('childMethod', function () {
     console.log('监听成功')
    })
   })
  }，
  methods {
    callMethod () {
     console.log('调用成功')
    }
  }
}

Composant parent :

<child ref="child" @click="click"></child>
export default {
  methods: {
   click () {
   this.$refs.child.$emit('childMethod') // 方法1
   this.$refs.child.callMethod() // 方法2
  },
  components: {
   child: child
  }
}

Je crois l'avoir vu Vous maîtrisez la méthode dans le cas de cet article Pour des informations plus intéressantes, veuillez faire attention aux autres. articles connexes sur le site php chinois !

Lecture recommandée :

Explication détaillée des étapes pour implémenter le téléchargement d'images et de fichiers dans vue

Axios envoie un message demande de soumission d'un formulaire d'image en détail

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!