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 :

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

<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 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 :

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
  }
}

Lecture recommandée :

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!