Comment utiliser le composant parent vue pour appeler le composant enfant (code joint)

Cette fois, je vais vous montrer comment utiliser le composant vue parent pour appeler le sous-composant (avec du code). Quelles sont les précautions à prendre pour utiliser le composant vue parent pour appeler le sous-composant. Ce qui suit est un cas pratique, prenons un. regarder.

Scénario :

Le composant parent introduit un sous-composant pour télécharger les pièces jointes : cliquez sur le composant pour télécharger respectivement les images requises correspondantes, et la boucle interne du sous-composant Plusieurs modules peuvent être créés

Le composant parent transmet le tableau dans la boucle du composant enfant pour créer différents modules de 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 :

Idée : cliquer sur le bouton dans le composant parent pour déclencher le composant enfant Méthode d'upload :

Utiliser

dans la méthode du composant parent défini sur le sous-composant pour appeler le sous-composant method ref="refName",this.$refs.refName.method Méthode de traitement du téléchargement dans le sous-composant :

Modèle de composant parent

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

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

À ce stade, vous pouvez mettre l'image dans le composant enfant via le bouton de téléchargement. Le premier module est inclus.

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

Voyons comment Vue Le composant parent appelle l'événement du composant enfantLe composant parent Vue transmet l'événement au composant enfant/L'appel d'événements

ne consiste pas à transmettre des données (accessoires). adapté à Vue 2.0

Méthode 1 : Le composant enfant écoute la méthode envoyée par le composant parent

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

Composant enfant :

Composant parent :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez faire attention à php chinois Autres connexes. articles en ligne !

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

Lecture recommandée :

Utilisez postman+json+springmvc pour effectuer des ajouts par lots

Comment empaqueter l'optimisation du webpack 4.0

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!