Heim > Web-Frontend > CSS-Tutorial > Die untergeordnete Vuejs2.0-Komponente ruft die Methode der übergeordneten Komponente auf

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

小云云
Freigeben: 2018-02-09 11:40:12
Original
2277 Leute haben es durchsucht

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>
Nach dem Login kopieren

Ü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>
Nach dem Login kopieren

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)
}
}
Nach dem Login kopieren

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"
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage