VUEJS 2.0 子組件訪問/調(diào)用父組件的實(shí)例
有時(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)測(cè)的自定義函數(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)測(cè)的函數(shù)來檢測(cè),最終生成的代碼是 類似
on: {
"refreshbizlines": function($event) {
_vm.goToDetail(123)
}
}
所以原理就是 子組件 訪問 父組件的 檢測(cè)函數(shù) refreshbizlines ,訪問了,則執(zhí)行 refreshbizline 下面的 函數(shù)
goToDetail -- 也就是父組件的
goToDetail函數(shù)
注意 父組件 的
v-on:refreshbizlines="goToDetail"
一定要放在 你父組件調(diào)用子組件的 模塊名上。
祝你們 編碼愉快。
以上這篇VUEJS 2.0 子組件訪問/調(diào)用父組件的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
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ù)配置不同域名接口,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
基于vue3&element-plus的暗黑模式實(shí)例詳解
實(shí)現(xiàn)暗黑主題的方式有很多種,也有很多成型的框架可以直接使用,下面這篇文章主要給大家介紹了關(guān)于基于vue3&element-plus的暗黑模式的相關(guān)資料,需要的朋友可以參考下2022-12-12
基于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)目
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)場(chǎng)動(dòng)畫的實(shí)例代碼
今天小編就為大家分享一篇vue+vue-router轉(zhuǎn)場(chǎng)動(dòng)畫的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09

