vue3实现局部页面刷新效果的示例详解
作者：Crhy、Y
这篇文章主要为大家详细介绍了vue3如何采用 App.vue定义全局变量与方法并实现局部页面刷新效果,文中的示例代码讲解详细,需要的可以参考一下
需求描述
两个VUE页面，A为主页面，B为子页面。现需求为，在A页面点击li数据后，B页面内容自动改变。
一、分析
网上解决方案一般使用provide和inject来定义全局变量和方法，并在局部页面中刷新。但多次尝试后并不适合，以下是prop 父 子传值以及全局方法配合实现；
二、代码示例
主页面（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实现局部页面刷新效果的示例详解的文章就介绍到这了,更多相关vue3局部页面刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！