vue3实现局部页面刷新效果的示例详解

<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>

<template>
    <div>
      <p>{{ globalid }}</p> 
      <p>{{ globalname }}</p>  
    </div>
  </template>
  
  <script>
  export default {
    props:['globalid','globalname'],
  };
  </script>

<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>