SoFunction
Updated on 2025-04-05

Detailed explanation of the example of vue3 realizing local page refresh effect

Requirement description

There are two VUE pages, A is the main page and B is the subpage. The current requirement is that after clicking on the Li data on page A, the content of page B will automatically change.

1. Analysis

Online solutions are generally usedprovideandinjectto define global variables and methods and refresh them in local pages. However, it is not suitable after multiple attempts. The following is the implementation of prop parent-child transmission of values ​​and global methods;

2. Code examples

Main page ()

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="" @click="handleClick(item)">{{  }}</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) {
        // Convert to object        let obj = ((item));
        // this.$root. You can directly call global methods (methods in them)        this.$(obj._source.id,obj._source.name);
      },
  }
};
</script>

Subpage ()

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

App page ()

&lt;template&gt;
  &lt;div &gt;
    &lt;A :global :global&gt;&lt;/A&gt;
    &lt;B :globalname="globalname" :globalname="globalname"&gt;&lt;/B&gt;
  &lt;/div&gt;
&lt;/template&gt;
 
&lt;script&gt;
import a from './components/';
import b from './components/';
 
export default {
  name: 'App',
  components: {
    a,
    b
  },
  data() {
    return {
      globalid: 'globalid Str ...', // Initialize global variables      globalname: 'globalname Str ...' // Initialize global variables    }
  },
  methods:{
    updateGlobalVariable(id,name) {
      = id; // Update the value of the global variable      = name; // Update the value of the global variable      // Reload the page      this.$forceUpdate();
    }
  }
 
};
&lt;/script&gt;

Personal test available!

This is the introduction to this article about the detailed explanation of vue3’s example of realizing the refresh effect of local pages. For more related content on vue3’s partial page refresh, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!