Comment le composant parent vue appelle-t-il le composant enfant

Cette fois, je vais vous montrer comment le composant vue parent appelle le composant enfant. Quelles sont les précautions pour que le composant vue parent appelle le composant enfant. Ce qui suit est un cas pratique, prenons un. regarder.

Scénario :

Le composant parent introduit le sous-composant de Télécharger les pièces jointes : 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 les événements/appelle les événements aux composants enfants

Il ne transmet pas de données (accessoires ), il est applicable à Vue 2.0

Méthode 1 : Le composant enfant écoute le composant parent qui envoie Méthode

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

Composant enfant :

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 connexes. articles sur le site php chinois !

Lecture recommandée :

Yuansheng JS implémente l'événement de glissement de fichier

Explication détaillée de l'utilisation des composants locaux globaux de vue

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!