Maison > interface Web > tutoriel CSS > le corps du texte

Le composant enfant Vuejs2.0 appelle la méthode du composant parent

小云云
Libérer: 2018-02-09 11:40:12
original
2255 Les gens l'ont consulté

Parfois, en raison de problèmes de mise en page, le sous-composant doit transmettre des données au composant parent et exécuter une certaine méthode du parent. Cet article présente principalement la méthode du sous-composant Vuejs 2.0 accédant/appelant le composant parent (exemple). code), qui est obligatoire. Les amis peuvent s'y référer, j'espère que cela pourra aider tout le monde.

Pas grand chose à dire sur le code :

Composant enfant :


<template> 
  <p class="isShowing" ref="isShowing"> 
    <p class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> 
      <ul ref="scroll_warpper_ul"> 
        <li class="menu-item" @click="goToFatherDetail(233)"> 
        </li> 
      </ul> 
    </p> 
    <v-loading class="isloading" v-show="hid_show_switch"></v-loading> 
  </p> 
</template> 
<script type="text/ecmascript-6"> 
  export default { 
    methods: { 
      goToFatherDetail (itemId) { 
        // this.$parent.$router.push(&#39;goToDetail&#39;); 
        console.log(&#39;子组件方法走了&#39; + itemId); 
        this.$emit(&#39;refreshbizlines&#39;, itemId); /* <span style="font-family: Arial, Helvetica, sans-serif;">itemId就是子要传的数据 - 这里很重要,refreshbizlines就是父组件$on监测的自定义函数不是父组件的自定义函数。*/</span> 
      } 
    } 
  }; 
</script>
Copier après la connexion

Composant parent :


<template> 
  <p class="main-wrapper"> 
      <p class="tab-wrapper"> 
        <p class="tab-item"> 
          <router-link to="/isShowing" class="table-item-text">正在热映</router-link> 
        </p> 
        <p class="tab-item"> 
          <router-link to="/willShow" class="table-item-text">即将上映</router-link> 
        </p> 
      </p> 
    </p> 
    <router-view class="items-show" v-on:refreshbizlines="goToDetail" keep-alive></router-view> 
  </p> 
</template> 
<script type="text/ecmascript-6"> 
  export default { 
    methods: { 
      goToDetail (itemId) { 
        console.log(&#39;父组件走你:&#39; + itemId); 
      } 
    }<strong> 
  }; 
</script></strong>
Copier après la connexion

Le composant parent utilise v-on pour créer une fonction de surveillance pour la détection. Le code final généré est similaire à


on: {
   "refreshbizlines": function($event) {
    _vm.goToDetail(123)
}
}
Copier après la connexion
<. 🎜>Donc, le principe est que le composant enfant accède à la fonction de détectionfreshbizlines du composant parent. En cas d'accès, la fonction ci-dessousfreshbizline est exécutée

goToDetail -- c'est-à-dire le

du composant parent. Fonction goToDetail

Remarque Le


v-on:refreshbizlines="goToDetail"
Copier après la connexion
du composant parent doit être placé sur le nom de module de votre composant parent appelant le composant enfant.


Recommandations associées :


Vuejs2.0 implémente le composant de pagination en utilisant $emit pour les compétences de transfert de données javascript de surveillance d'événements

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal