vue this.reload 方法 配置
1.場(chǎng)景
在處理列表時(shí),常常有刪除一條數(shù)據(jù)或者新增數(shù)據(jù)之后需要重新刷新當(dāng)前頁(yè)面的需求。
2.遇到的問題
1. 用vue-router重新路由到當(dāng)前頁(yè)面,頁(yè)面是不進(jìn)行刷新的
2.采用window.reload(),
或者router.go(0)
刷新時(shí),整個(gè)瀏覽器進(jìn)行了重新加載,閃爍,體驗(yàn)不好
3.解決方法
provide / inject 組合
作用:允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴,不論組件層次有多深,并在起上下游關(guān)系成立的時(shí)間里始終生效。
我的項(xiàng)目配置:
①home.vue
<router-view v-if="isReloadAlive"></router-view>
export default { provide() { return { reload: this.reload } }, data(){ isReloadAlive : true }, methods: { reload() { this.isReloadAlive = false; this.$nextTick(function(){ this.isReloadAlive = true; }) } } }
②使用reload方法的頁(yè)面
內(nèi)容管理 - 投顧推薦 tgtj.vue
export default { inject: ['reload'], // 注入 reload 方法 data(){ 。。。。 }, method: { set: function(id){ let param = { "recommendedConsultant.id": this.recommendedConsultant_id, "recommendedConsultant.sequence": this.recommendedConsultant_sequence, "recommendedConsultant.consultant_id": id } setRecommendedAdvisor(param).then((data) => { this.$message({ message: data.ret.retMsg }); if(data.ret.succeed){ this.reload() // 調(diào)用刷新方法 } }); } } }
總結(jié)
以上所述是小編給大家介紹的vue this.reload 方法 配置,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 詳解Vue This$Store總結(jié)
- 淺談vue方法內(nèi)的方法使用this的問題
- 解決vue.js this.$router.push無效的問題
- Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項(xiàng)
- 解決vue this.$forceUpdate() 處理頁(yè)面刷新問題(v-for循環(huán)值刷新等)
- Vue中"This dependency was not found"問題的解決方法
- Vue中this.$router.push參數(shù)獲取方法
- 對(duì)vue.js中this.$emit的深入理解
- vue使用axios時(shí)關(guān)于this的指向問題詳解
- vue列表單項(xiàng)展開收縮功能之this.$refs的詳解
相關(guān)文章
swiper在vue項(xiàng)目中l(wèi)oop循環(huán)輪播失效的解決方法
今天小編就為大家分享一篇swiper在vue項(xiàng)目中l(wèi)oop循環(huán)輪播失效的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue動(dòng)態(tài)合并單元格并添加小計(jì)合計(jì)功能示例
這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)合并單元格并添加小計(jì)合計(jì)功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11基于vue-draggable 實(shí)現(xiàn)三級(jí)拖動(dòng)排序效果
這篇文章主要介紹了基于vue-draggable 實(shí)現(xiàn)三級(jí)拖動(dòng)排序效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01Vue組件BootPage實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了Vue小組件BootPage實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09Vue項(xiàng)目pdf(base64)轉(zhuǎn)圖片遇到的問題及解決方法
這篇文章主要介紹了Vue項(xiàng)目pdf(base64)轉(zhuǎn)圖片遇到的問題及解決方法,需要的朋友可以參考下2018-10-10解決element?ui?cascader?動(dòng)態(tài)加載回顯問題
這篇文章主要介紹了element?ui?cascader?動(dòng)態(tài)加載回顯問題解決方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08