Quelles méthodes les composants parents de Vue utilisent-ils pour appeler les composants enfants ?

Cette fois, je vais vous présenter les méthodes d'appel des sous-composants par les composants parents de vue. Quelles sont les précautions lorsque les composants parents de vue appellent des sous-composants. Voici un cas pratique, jetons un coup d'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
  }
}

Comment mettre en évidence les résultats lors d'une recherche globale

Une explication détaillée du cas d'utilisation de l'attribut du routeur d'Angular4

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!