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

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

Utiliser

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();
  }    
},

<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);
},

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

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

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!