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ù)共享問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08vue3配置router路由并實(shí)現(xiàn)頁面跳轉(zhuǎn)功能
這篇文章主要介紹了vue3配置router路由并實(shí)現(xiàn)頁面跳轉(zhuǎn),本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04vue實(shí)現(xiàn)綁定事件的方法實(shí)例代碼詳解
這篇文章主要介紹了vue實(shí)現(xiàn)綁定事件的方法實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06vue3+element?Plus使用el-tabs標(biāo)簽頁解決頁面刷新不回到默認(rèn)頁的問題
這篇文章主要介紹了vue3+element?Plus使用el-tabs標(biāo)簽頁頁面刷新不回到默認(rèn)頁的操作方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07Vue路由監(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使用Cascader級聯(lián)選擇器數(shù)據(jù)回顯中的坑
這篇文章主要介紹了淺談Vue使用Cascader級聯(lián)選擇器數(shù)據(jù)回顯中的坑,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10