vue3 如何采用 App.vue定义全局变量与方法，并实现局部vue页面刷新

Crhy、Y2024-01-09 14:01

需求描述：

两个VUE页面，A为主页面，B为子页面。现需求为，在A页面点击li数据后，B页面内容自动改变。

一、分析

二、代码示例

一、分析

网上解决方案一般使用provide和inject来定义全局变量和方法，并在局部页面中刷新。但多次尝试后并不适合，以下是prop 父子传值以及全局方法配合实现；

二、代码示例

主页面（A.vue）

html 复制代码

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

html 复制代码

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

App页面（App.vue）

html 复制代码

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

亲测可用！