Le composant enfant VUEJS 2.0 accède/appelle le composant parent

Ce qui suit est un exemple de la façon dont un sous-composant VUEJS 2.0 accède/appelle un composant parent. Il a une très bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Parfois, en raison de problèmes de mise en page, le composant enfant doit transmettre des données au composant parent et exécuter une certaine méthode du parent. Je n'entrerai pas dans 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>

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>

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

Le principe est donc que le composant enfant accède à la fonction de détection Actualiser les lignes du composant parent En cas d'accès, la fonction ci-dessous Actualiser la ligne est exécutée

goToDetail -- c'est-à-dire, la fonction

goToDetail

du composant parent. Notez que la fonction

v-on:refreshbizlines="goToDetail"

du composant parent doit être placée sur le nom du module de votre composant parent appelant le composant enfant.

Bon codage.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment résoudre le problème selon lequel la méthode vuex dans le composant parent met à jour l'état et le composant enfant ne peut pas être mis à jour et rendu à temps

À propos de l'implémentation du framework de commentaires Vue (implémentation du composant parent)

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!