Vuejs 2.0中子組件訪問/調用父組件的示例分析

這篇文章給大家分享的是有關Vuejs 2.0中子組件訪問/調用父組件的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

子組件：

<template> 
  <div class="isShowing" ref="isShowing"> 
    <div 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> 
    </div> 
    <v-loading class="isloading" v-show="hid_show_switch"></v-loading> 
  </div> 
</template> 
<script type="text/ecmascript-6"> 
  export default { 
    methods: { 
      goToFatherDetail (itemId) { 
        // this.$parent.$router.push('goToDetail'); 
        console.log('子組件方法走了' + itemId); 
        this.$emit('refreshbizlines', itemId); /* <span >itemId就是子要傳的數據 - 這里很重要,refreshbizlines就是父組件$on監測的自定義函數不是父組件的自定義函數。*/</span> 
      } 
    } 
  }; 
</script>

父組件：

<template> 
  <div class="main-wrapper"> 
      <div class="tab-wrapper"> 
        <div class="tab-item"> 
          <router-link to="/isShowing" class="table-item-text">正在熱映</router-link> 
        </div> 
        <div class="tab-item"> 
          <router-link to="/willShow" class="table-item-text">即將上映</router-link> 
        </div> 
      </div> 
    </div> 
    <router-view class="items-show" v-on:refreshbizlines="goToDetail" keep-alive></router-view> 
  </div> 
</template> 
<script type="text/ecmascript-6"> 
  export default { 
    methods: { 
      goToDetail (itemId) { 
        console.log('父組件走你：' + itemId); 
      } 
    }<strong> 
  }; 
</script></strong>

父組件用 v-on 來做個監測的函數來檢測，最終生成的代碼是 類似

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

所以原理就是 子組件 訪問 父組件的 檢測函數 refreshbizlines ，訪問了，則執行 refreshbizline 下面的 函數

goToDetail -- 也就是父組件的

goToDetail函數

注意 父組件 的

v-on:refreshbizlines="goToDetail"

 一定要放在 你父組件調用子組件的 模塊名上。

感謝各位的閱讀！關于“Vuejs 2.0中子組件訪問/調用父組件的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！