Le composant parent vue appelle les méthodes et les événements du composant enfant

Cet article présente principalement les informations pertinentes sur les composants parents de vue appelant des méthodes et des événements de sous-composant. Le composant parent passe dans la boucle du sous-composant du tableau pour créer différents modules de composants. implémenter une telle fonction

Scénario :

Le composant parent introduit le sous-composant de téléchargement des pièces jointes : cliquez sur le composant pour télécharger le correspondant images requises respectivement, à l'intérieur des boucles de sous-composants peuvent créer plusieurs modules.

Le composant parent transmet le tableau dans la boucle du composant enfant pour créer différents modules de composants

<.>

Il y a 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 méthode du composant

ref="refName", Méthode de traitement du téléchargement dans le sous-composant : 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();
  }    
},

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>

Définissez la méthode dans la méthode du composant parent et transmettez-la en même temps 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.

Regardons le composant parent Vue appelant des événements de composant enfant

Le composant parent Vue transmet des événements/appelle des événements aux composants enfants

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

Méthode 1 : le 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

Le 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(&#39;childMethod&#39;) // 方法1
   this.$refs.child.callMethod() // 方法2
  },
  components: {
   child: child
  }
}

Ce qui précède est ce que j'ai organisé Pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Explication détaillée des ressources de la page de rendu nodejs via l'écriture de réponse

exemple de fonction de liste déroulante vue code

Explication détaillée des modules angulaires2 et des modules partagés

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!