Die untergeordnete Vuejs2.0-Komponente ruft die Methode der übergeordneten Komponente auf

Manchmal muss die Unterkomponente aufgrund von Layoutproblemen Daten an die übergeordnete Komponente übergeben und eine bestimmte Methode der übergeordneten Komponente ausführen. In diesem Artikel wird hauptsächlich die Methode des Zugriffs/Aufrufs der übergeordneten Komponente durch Vuejs 2.0 vorgestellt (Beispiel). Code), der erforderlich ist. Freunde können darauf verweisen, ich hoffe, es kann allen helfen.

Zum Code gibt es nicht viel zu sagen:

Untergeordnete Komponente:

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

Übergeordnete Komponente:

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

Die übergeordnete Komponente verwendet v-on, um eine Überwachungsfunktion zur Erkennung zu erstellen. Der endgültig generierte Code ähnelt

on: {
   "refreshbizlines": function($event) {
    _vm.goToDetail(123)
}
}

Das Prinzip besteht darin, dass die untergeordnete Komponente auf die Erkennungsfunktion „refreshbizlines“ der übergeordneten Komponente zugreift. Wenn darauf zugegriffen wird, wird die Funktion unter „refreshbizline“ ausgeführt

goToDetail – also auf die Funktion

der übergeordneten Komponente goToDetail-Funktion

Hinweis Das

v-on:refreshbizlines="goToDetail"

der übergeordneten Komponente muss auf dem Modulnamen Ihrer übergeordneten Komponente platziert werden, die die untergeordnete Komponente aufruft.

Verwandte Empfehlungen:

Vuejs2.0 implementiert eine Paging-Komponente mit $emit zur Ereignisüberwachung, Datenübertragung_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonDie untergeordnete Vuejs2.0-Komponente ruft die Methode der übergeordneten Komponente auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!