欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

有時(shí)候因?yàn)椴季謫栴},需要子組件 把數(shù)據(jù) 傳給父組件,并執(zhí)行父級的某個(gè)方法,不多說上代碼:

子組件:

<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 來做個(gè)監(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)用父組件的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

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

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

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

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

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

    Vue Router 中meta 對象示例詳解

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

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

    在平時(shí)開發(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ù),如何實(shí)現(xiàn)呢,下面小編給大家?guī)砹薞ue中如何獲取json文件中的數(shù)據(jù),感興趣的朋友一起看看吧
    2022-09-09
  • vue實(shí)現(xiàn)綁定事件的方法實(shí)例代碼詳解

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

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

    vue3+element?Plus使用el-tabs標(biāo)簽頁解決頁面刷新不回到默認(rèn)頁的問題

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

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

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

    Vue編譯器optimize源碼分析

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

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

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

最新評論