亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vuejs 2.0 子組件訪問/調(diào)用父組件的方法(示例代碼)

 更新時間:2018年02月08日 14:33:18   作者:wpj130  
這篇文章主要介紹了Vuejs 2.0 子組件訪問/調(diào)用父組件的方法(示例代碼),需要的朋友可以參考下

有時候因為布局問題,需要子組件 把數(shù)據(jù) 傳給父組件,并執(zhí)行父級的某個方法,不多說上代碼:

子組件:

<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 style="font-family: Arial, Helvetica, sans-serif;">itemId就是子要傳的數(shù)據(jù) - 這里很重要,refreshbizlines就是父組件$on監(jiān)測的自定義函數(shù)不是父組件的自定義函數(shù)。*/</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 來做個監(jiān)測的函數(shù)來檢測,最終生成的代碼是 類似

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

所以原理就是 子組件 訪問 父組件的 檢測函數(shù) refreshbizlines ,訪問了,則執(zhí)行 refreshbizline 下面的 函數(shù)

goToDetail -- 也就是父組件的

goToDetail函數(shù)

注意 父組件 的

v-on:refreshbizlines="goToDetail"

 一定要放在 你父組件調(diào)用子組件的 模塊名上。

總結(jié)

以上所述是小編給大家介紹的Vuejs 2.0 子組件訪問/調(diào)用父組件的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • VueX如何實現(xiàn)數(shù)據(jù)共享

    VueX如何實現(xiàn)數(shù)據(jù)共享

    這篇文章主要介紹了VueX如何實現(xiàn)數(shù)據(jù)共享問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • vue3配置router路由并實現(xiàn)頁面跳轉(zhuǎn)功能

    vue3配置router路由并實現(xiàn)頁面跳轉(zhuǎn)功能

    這篇文章主要介紹了vue3配置router路由并實現(xiàn)頁面跳轉(zhuǎn),本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-04-04
  • Vue Router 中meta 對象示例詳解

    Vue Router 中meta 對象示例詳解

    本文主要介紹了在VueRouter中,meta對象的使用和配置方式,meta對象可以包含任何你希望附加到路由的自定義信息,這些配置信息可以靈活的滿足你的應(yīng)用需求,使得路由配置更具靈活性和可擴展性
    2024-10-10
  • vue中v-model和.sync修飾符的區(qū)別

    vue中v-model和.sync修飾符的區(qū)別

    在平時開發(fā)是經(jīng)常用到一些父子組件通信,經(jīng)常用到props、vuex等等,下面這篇文章主要給大家介紹了關(guān)于vue中v-model和.sync修飾符區(qū)別的相關(guān)資料,需要的朋友可以參考下
    2022-06-06
  • Vue中如何獲取json文件中的數(shù)據(jù)

    Vue中如何獲取json文件中的數(shù)據(jù)

    訪問百度音樂API需要傳遞音樂類型參數(shù),而這些參數(shù)是存在musictype.json中,現(xiàn)在在組件listcate.vue需要獲取json數(shù)據(jù),如何實現(xiàn)呢,下面小編給大家?guī)砹薞ue中如何獲取json文件中的數(shù)據(jù),感興趣的朋友一起看看吧
    2022-09-09
  • vue實現(xiàn)綁定事件的方法實例代碼詳解

    vue實現(xiàn)綁定事件的方法實例代碼詳解

    這篇文章主要介紹了vue實現(xiàn)綁定事件的方法實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-06-06
  • vue3+element?Plus使用el-tabs標簽頁解決頁面刷新不回到默認頁的問題

    vue3+element?Plus使用el-tabs標簽頁解決頁面刷新不回到默認頁的問題

    這篇文章主要介紹了vue3+element?Plus使用el-tabs標簽頁頁面刷新不回到默認頁的操作方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-07-07
  • Vue路由監(jiān)聽實現(xiàn)同頁面動態(tài)加載的示例

    Vue路由監(jiān)聽實現(xiàn)同頁面動態(tài)加載的示例

    本文主要介紹了Vue基于路由監(jiān)聽實現(xiàn)同頁面動態(tài)加載的示例,重點在于切換路由的時候,重新拉取列表數(shù)據(jù),接下來看看實現(xiàn)方法吧
    2021-05-05
  • Vue編譯器optimize源碼分析

    Vue編譯器optimize源碼分析

    這篇文章主要為大家介紹了Vue?編譯器optimize源碼分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07
  • 淺談Vue使用Cascader級聯(lián)選擇器數(shù)據(jù)回顯中的坑

    淺談Vue使用Cascader級聯(lián)選擇器數(shù)據(jù)回顯中的坑

    這篇文章主要介紹了淺談Vue使用Cascader級聯(lián)選擇器數(shù)據(jù)回顯中的坑,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10

最新評論