Vuejs2.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"

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

相關推薦：

vuejs2.0實作分頁元件使用$emit進行事件監聽資料傳遞的方法_javascript技巧

#

以上是Vuejs2.0子元件呼叫父元件的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！