vue3實現(xiàn)局部頁面刷新效果的示例詳解
更新時間：2024年01月09日 16:59:29 作者：Crhy、Y
這篇文章主要為大家詳細介紹了vue3如何采用 App.vue定義全局變量與方法并實現(xiàn)局部頁面刷新效果,文中的示例代碼講解詳細,需要的可以參考一下
需求描述
兩個VUE頁面，A為主頁面，B為子頁面?，F(xiàn)需求為，在A頁面點擊li數(shù)據后，B頁面內容自動改變。
一、分析
網上解決方案一般使用provide和inject來定義全局變量和方法，并在局部頁面中刷新。但多次嘗試后并不適合，以下是prop 父 子傳值以及全局方法配合實現(xiàn)；
二、代碼示例
主頁面（A.vue）
<template>
<div>
<ul>
<li v-for="item in list" :key="item.id" @click="handleClick(item)">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
};
},
methods: {
handleClick(item) {
// 轉換為對象
let obj = JSON.parse(JSON.stringify(item));
// this.$root.可以直接調用全局方法（App.vue 中的方法）
this.$root.updateGlobalVariable(obj._source.id,obj._source.name);
},
}
};
</script>子頁面（B.vue）
<template>
<div>
<p>{{ globalid }}</p>
<p>{{ globalname }}</p>
</div>
</template>
<script>
export default {
props:['globalid','globalname'],
};
</script>App頁面（App.vue）
<template>
<div id="app">
<A :globalid="globalid" :globalid="globalid"></A>
<B :globalname="globalname" :globalname="globalname"></B>
</div>
</template>
<script>
import a from './components/A.vue';
import b from './components/B.vue';
export default {
name: 'App',
components: {
a,
b
},
data() {
return {
globalid: 'globalid Str ...', // 初始化全局變量
globalname: 'globalname Str ...' // 初始化全局變量
}
},
methods:{
updateGlobalVariable(id,name) {
this.globalid= id; // 更新全局變量的值
this.globalname= name; // 更新全局變量的值
// 重新加載頁面
this.$forceUpdate();
}
}
};
</script>親測可用！
到此這篇關于vue3實現(xiàn)局部頁面刷新效果的示例詳解的文章就介紹到這了,更多相關vue3局部頁面刷新內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue長列表優(yōu)化之虛擬列表實現(xiàn)過程詳解
前端的業(yè)務開發(fā)中會遇到不使用分頁方式來加載長列表的需求,下面這篇文章主要給大家介紹了關于vue長列表優(yōu)化之虛擬列表實現(xiàn)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
本篇文章主要介紹了詳解vee-validate的使用個人小結，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-06-06
這篇文章主要為大家詳細介紹了如何基于Vue實現(xiàn)簡單的消息提示功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-10-10
這篇文章主要介紹了vue-cli3.0如何修改端口號，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中使用帶隱藏文本信息的圖片、圖片水印的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
這篇文章主要為大家介紹了Vue3必學技巧-自定義Hooks-讓寫Vue3更暢快示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
即便是功能強大的?Vue.js?也無法完全避免內存泄漏的問題,內存泄漏不僅會影響應用的性能,還可能導致瀏覽器崩潰,下面我們來看看Vue?中常見的內存泄漏場景以及如何避免這些問題吧2024-12-12
基于vue-simple-uploader封裝文件分片上傳、秒傳及斷點續(xù)傳的全局上傳插件功能
這篇文章主要介紹了基于vue-simple-uploader封裝文件分片上傳、秒傳及斷點續(xù)傳的全局上傳插件,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
這篇文章主要介紹了在vant中如何使用dialog彈窗，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
今天小編就為大家分享一篇vue單頁面應用打開新窗口顯示跳轉頁面的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09