VUEJS 2.0 子元件存取/呼叫父元件

下面要為大家分享一篇VUEJS 2.0 子元件存取/呼叫父元件的實例。具有很好的參考價值，希望對大家有幫助。

有時候因為佈局問題，需要子元件把資料傳給父元件，執行父級的某個方法，不多說上程式碼：

子元件：

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

#父元件：

# #

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

父元件用v-on 來做個監控的函數來偵測，最後產生的程式碼是類似

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

# #所以原理就是子元件存取父元件的偵測函數refreshbizlines ，存取了，則執行refreshbizline 下面的函數

goToDetail -- 也就是父元件的

#goToDetail函數

注意父元件的

v-on:refreshbizlines="goToDetail"

一定要放在你父元件呼叫子元件的模組名稱上。

祝你們 編碼愉快。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

如何解決父元件中vuex方法更新state子元件不能及時更新並渲染

關於Vue評論框架的實作(父元件的實作)

#

以上是VUEJS 2.0 子元件存取/呼叫父元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！