Le composant parent Vue appelle le cas pratique du composant enfant

Cette fois, je vais vous présenter un cas pratique de sous-composant appelant un composant vue parent. Quelles sont les précautions dans les cas pratiques de sous-composant appelant vue parent. 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

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 dynamiquement des diagrammes circulaires avec html5+canvas

Explication détaillée des étapes pour utilisez pushState et replaceState

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!