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中文網其他相關文章！