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

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

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

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

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

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

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

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!