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

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

 更新時間:2018年02月10日 08:40:06   投稿:jingxian  
下面小編就為大家分享一篇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)用子組件的 模塊名上。

祝你們 編碼愉快。

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

相關文章

  • vue+Element-ui實現(xiàn)分頁效果實例代碼詳解

    vue+Element-ui實現(xiàn)分頁效果實例代碼詳解

    這篇文章主要介紹了vue+Element-ui實現(xiàn)分頁效果 ,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-12-12
  • Vue使用el-table實現(xiàn)自適應列寬

    Vue使用el-table實現(xiàn)自適應列寬

    這篇文章主要為大家詳細介紹了Vue使用el-table實現(xiàn)自適應列寬,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-01-01
  • 解決vue項目使用font-awesome,build后路徑的問題

    解決vue項目使用font-awesome,build后路徑的問題

    今天小編就為大家分享一篇解決vue項目使用font-awesome,build后路徑的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • nginx+vite項目打包以及部署的詳細過程

    nginx+vite項目打包以及部署的詳細過程

    我們使用nginx部署Vue項目,實質(zhì)上就是將Vue項目打包后的內(nèi)容同步到nginx指向的文件夾,下面這篇文章主要給大家介紹了關于nginx+vite項目打包以及部署的相關資料,需要的朋友可以參考下
    2023-01-01
  • Vue.js常用指令匯總(v-if、v-for等)

    Vue.js常用指令匯總(v-if、v-for等)

    這篇文章主要為大家詳細匯總了Vue.js常用指令及使用方法,包括v-if、v-for、v-show、v-bind、v-on等指令,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • vue項目中播放rtmp視頻文件流的方法

    vue項目中播放rtmp視頻文件流的方法

    這篇文章主要介紹了vue項目中播放rtmp視頻文件流 ,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-09-09
  • vue實現(xiàn)div拖拽互換位置

    vue實現(xiàn)div拖拽互換位置

    這篇文章主要為大家詳細介紹了vue實現(xiàn)div拖拽互換位置的方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-12-12
  • Vue.js 應用性能優(yōu)化分析+解決方案

    Vue.js 應用性能優(yōu)化分析+解決方案

    這篇文章主要介紹了Vue.js 應用性能優(yōu)化分析以及解決方案,VueJS 是開發(fā)網(wǎng)站最受歡迎、最穩(wěn)定的 JavaScript 框架,但與其他框架一樣,如果您忽略它,性能就會受到影響,下面我們就一起來看看怎么才能讓性能提升吧
    2021-12-12
  • vue項目部署到Apache服務器中遇到的問題解決

    vue項目部署到Apache服務器中遇到的問題解決

    這篇文章主要介紹了vue項目部署到Apache中遇到的問題解決,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • 基于vue cli重構多頁面腳手架過程詳解

    基于vue cli重構多頁面腳手架過程詳解

    本文分步驟給大家介紹了基于vue cli重構多頁面腳手架過程,非常不錯,具有參考借鑒價值,需要的朋友參考下
    2018-01-01

最新評論