vue中按鈕操作完刷新頁面的實(shí)現(xiàn)
更新時(shí)間：2022年07月06日 11:54:52 作者：醉夢洛
這篇文章主要介紹了vue中按鈕操作完刷新頁面的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue按鈕操作完刷新頁面
首先從子組件和父組件角度去寫這個(gè)東西，簡言之就是在父組件中實(shí)現(xiàn)這個(gè)刷新功能方法，然后在子組件中進(jìn)行綁定并進(jìn)行監(jiān)聽就好了啊
1.父組件中實(shí)現(xiàn)
① 圖示部分：
個(gè)人建議這個(gè)作為父組件，肯定一般是放在列表中的，即把列表頁面作為父組件的歸屬地
② 代碼部分：
method方法中部分
refresh () {
this.reload()
}將reload進(jìn)行注入
inject: ['reload'],
2.子組件綁定
① 子組件進(jìn)行綁定
在父組件中引用子組件頁面的地方進(jìn)行綁定
如圖：
綁定腳本：
@refresh="refresh"
② 單獨(dú)去子組件頁面處理成功的地方去監(jiān)聽
圖示：比如就以這個(gè)頁面為例子
進(jìn)入子頁面：
在子頁面組件中處理成功后進(jìn)行監(jiān)聽父組件中刷新方法，以上設(shè)置完就ok了
點(diǎn)擊按鈕后自動(dòng)刷新頁面
在按鈕點(diǎn)擊事件中添加
window.location.reload();
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue實(shí)現(xiàn)瀏覽器全屏展示功能,項(xiàng)目中使用的是sreenfull插件，執(zhí)行命令安裝，具體實(shí)現(xiàn)代碼跟隨小編一起看看吧2019-11-11
這篇文章主要介紹了vue3 vite配置跨域以及不生效問題,本文給大家分享完美解決方案，需要的朋友可以參考下2023-07-07
vue中動(dòng)態(tài)修改img標(biāo)簽中src的方法實(shí)踐
本文主要介紹了vue中動(dòng)態(tài)修改img標(biāo)簽中src的方法實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了Vue使用video.js的代碼詳解,包括在vue腳手架中引入video.js，實(shí)例化了視頻.js播放器，并在上銷毀了它，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-03-03
這篇文章給大家分享了基于vue實(shí)現(xiàn)一個(gè)簡單的MVVM框架的相關(guān)內(nèi)容，有需要的朋友們可以參考學(xué)習(xí)下。2018-08-08
這篇文章主要介紹了淺談vue父子組件怎么傳值,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
vue中的this.$router.push()路由傳值方式
這篇文章主要介紹了vue中的this.$router.push()路由傳值方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vite如何build時(shí)清除console.log()問題
這篇文章主要介紹了vite如何build時(shí)清除console.log()問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue-router路由與頁面間導(dǎo)航實(shí)例解析
vue-router 是一個(gè)插件，需要在 Vue 的全局引用中通過 Vue.use()將它引用到 Vue 實(shí)例當(dāng)中。接下來通過本文給大家分享vue-router路由與頁面間導(dǎo)航，需要的朋友參考下吧2017-11-11
在Vue3中創(chuàng)建和使用全局組件的實(shí)現(xiàn)方式
在前端開發(fā)中,Vue.js 是一個(gè)廣泛使用的框架,因其靈活性和強(qiáng)大的功能,得到許多開發(fā)者的喜愛,Vue 3 的發(fā)布為這一框架帶來了很多新的特性和改進(jìn),在本文中,我們將詳細(xì)討論如何在 Vue 3 中創(chuàng)建和使用全局組件,并通過示例代碼展示具體實(shí)現(xiàn)方式,需要的朋友可以參考下2024-07-07