VUEJS 2.0 子組件訪問(wèn)/調(diào)用父組件的實(shí)例
有時(shí)候因?yàn)椴季謫?wèn)題,需要子組件 把數(shù)據(jù) 傳給父組件,并執(zhí)行父級(jí)的某個(gè)方法,不多說(shuō)上代碼:
子組件:
<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 來(lái)做個(gè)監(jiān)測(cè)的函數(shù)來(lái)檢測(cè),最終生成的代碼是 類似
on: { "refreshbizlines": function($event) { _vm.goToDetail(123) } }
所以原理就是 子組件 訪問(wèn) 父組件的 檢測(cè)函數(shù) refreshbizlines ,訪問(wèn)了,則執(zhí)行 refreshbizline 下面的 函數(shù)
goToDetail -- 也就是父組件的
goToDetail函數(shù)
注意 父組件 的
v-on:refreshbizlines="goToDetail"
一定要放在 你父組件調(diào)用子組件的 模塊名上。
祝你們 編碼愉快。
以上這篇VUEJS 2.0 子組件訪問(wèn)/調(diào)用父組件的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue+Element-ui實(shí)現(xiàn)分頁(yè)效果實(shí)例代碼詳解
這篇文章主要介紹了vue+Element-ui實(shí)現(xiàn)分頁(yè)效果 ,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12Vue使用el-table實(shí)現(xiàn)自適應(yīng)列寬
這篇文章主要為大家詳細(xì)介紹了Vue使用el-table實(shí)現(xiàn)自適應(yīng)列寬,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01解決vue項(xiàng)目使用font-awesome,build后路徑的問(wèn)題
今天小編就為大家分享一篇解決vue項(xiàng)目使用font-awesome,build后路徑的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09nginx+vite項(xiàng)目打包以及部署的詳細(xì)過(guò)程
我們使用nginx部署Vue項(xiàng)目,實(shí)質(zhì)上就是將Vue項(xiàng)目打包后的內(nèi)容同步到nginx指向的文件夾,下面這篇文章主要給大家介紹了關(guān)于nginx+vite項(xiàng)目打包以及部署的相關(guān)資料,需要的朋友可以參考下2023-01-01Vue.js 應(yīng)用性能優(yōu)化分析+解決方案
這篇文章主要介紹了Vue.js 應(yīng)用性能優(yōu)化分析以及解決方案,VueJS 是開(kāi)發(fā)網(wǎng)站最受歡迎、最穩(wěn)定的 JavaScript 框架,但與其他框架一樣,如果您忽略它,性能就會(huì)受到影響,下面我們就一起來(lái)看看怎么才能讓性能提升吧2021-12-12vue項(xiàng)目部署到Apache服務(wù)器中遇到的問(wèn)題解決
這篇文章主要介紹了vue項(xiàng)目部署到Apache中遇到的問(wèn)題解決,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08基于vue cli重構(gòu)多頁(yè)面腳手架過(guò)程詳解
本文分步驟給大家介紹了基于vue cli重構(gòu)多頁(yè)面腳手架過(guò)程,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2018-01-01