最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

VUEJS 2.0 子組件訪問/調(diào)用父組件的實(shí)例

 更新時(shí)間:2018年02月10日 08:40:06   投稿:jingxian  
下面小編就為大家分享一篇VUEJS 2.0 子組件訪問/調(diào)用父組件的實(shí)例。具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧

有時(shí)候因?yàn)椴季謫栴},需要子組件 把數(shù)據(jù) 傳給父組件,并執(zhí)行父級(jí)的某個(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)用子組件的 模塊名上。

祝你們 編碼愉快。

以上這篇VUEJS 2.0 子組件訪問/調(diào)用父組件的實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 詳解用vue編寫彈出框組件

    詳解用vue編寫彈出框組件

    本篇文章主要介紹了詳解用vue編寫彈出框組件,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-07-07
  • Vue之Axios的異步通信詳解

    Vue之Axios的異步通信詳解

    這篇文章主要為大家詳細(xì)介紹了Vue之Axios的異步通信,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-03-03
  • vue封裝axios的幾種方法

    vue封裝axios的幾種方法

    在vue中最常用的應(yīng)該就是axios了,這是一個(gè)很強(qiáng)大的處理ajax的庫。今天我就分享一下我是如何封裝axios的。axios的基本api不再贅述,提前安裝一下也不用我說了吧
    2021-06-06
  • Vue + Echarts頁面內(nèi)存占用高的問題解決方案

    Vue + Echarts頁面內(nèi)存占用高的問題解決方案

    點(diǎn)擊左側(cè)的菜單可以切換不同的看板,有些看板頁面中的報(bào)表比較多,用戶多次切換后頁面的內(nèi)存占用可以上升為GB級(jí),嚴(yán)重時(shí)導(dǎo)致頁面內(nèi)存溢出,使得頁面崩潰,極大影響了用戶體驗(yàn),本文給大家介紹Vue + Echarts頁面內(nèi)存占用高的問題解決方案,感興趣的朋友一起看看吧
    2024-02-02
  • vue項(xiàng)目webpack中Npm傳遞參數(shù)配置不同域名接口

    vue項(xiàng)目webpack中Npm傳遞參數(shù)配置不同域名接口

    這篇文章主要介紹了vue項(xiàng)目webpack中Npm傳遞參數(shù)配置不同域名接口,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-06-06
  • 基于vue3&element-plus的暗黑模式實(shí)例詳解

    基于vue3&element-plus的暗黑模式實(shí)例詳解

    實(shí)現(xiàn)暗黑主題的方式有很多種,也有很多成型的框架可以直接使用,下面這篇文章主要給大家介紹了關(guān)于基于vue3&element-plus的暗黑模式的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • 淺談Vue SPA 首屏加載優(yōu)化實(shí)踐

    淺談Vue SPA 首屏加載優(yōu)化實(shí)踐

    本篇文章主要介紹了淺談Vue SPA 首屏加載優(yōu)化實(shí)踐,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-12-12
  • 基于vue3開發(fā)mobile-table適用于移動(dòng)端表格

    基于vue3開發(fā)mobile-table適用于移動(dòng)端表格

    這篇文章主要給大家介紹了關(guān)于如何基于vue3開發(fā)mobile-table適用于移動(dòng)端表格的相關(guān)資料,需要的朋友可以參考下
    2024-03-03
  • 超詳細(xì)圖解如何運(yùn)行vue項(xiàng)目

    超詳細(xì)圖解如何運(yùn)行vue項(xiàng)目

    Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,它的核心庫只關(guān)注視圖層,易于上手,也便于與其他庫或已有項(xiàng)目整合,下面這篇文章主要給大家介紹了關(guān)于如何運(yùn)行vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下
    2023-05-05
  • vue+vue-router轉(zhuǎn)場動(dòng)畫的實(shí)例代碼

    vue+vue-router轉(zhuǎn)場動(dòng)畫的實(shí)例代碼

    今天小編就為大家分享一篇vue+vue-router轉(zhuǎn)場動(dòng)畫的實(shí)例代碼,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09

最新評(píng)論

南涧| 邢台市| 湖口县| 天等县| 英吉沙县| 宕昌县| 西昌市| 镇雄县| 清河县| 汨罗市| 黎川县| 正定县| 舟曲县| 寿光市| 镇雄县| 万全县| 玛沁县| 安阳市| 南投市| 读书| 遂溪县| 三河市| 黄平县| 绥滨县| 白朗县| 双辽市| 桐城市| 株洲县| 会宁县| 罗山县| 安远县| 信丰县| 乌海市| 安塞县| 武穴市| 旌德县| 财经| 武邑县| 平罗县| 天津市| 应用必备|