Le composant enfant Vuejs2.0 appelle la méthode du composant parent-tutoriel CSS-php.cn

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

小云云

Libérer： 2018-02-09 11:40:12

original

2278 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!