vue2中怎么让app.vue中的变量能够在其他页面使用

要在其他页面使用App.vue中的变量，可以使用Vue.js提供的全局事件总线（Event Bus）来实现。

首先，在App.vue中，可以定义一个Vue实例，用来作为事件总线：

// App.vue
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  created() {
    Vue.prototype.$bus = this
  }
}

在上面的代码中，我们在App.vue中定义了一个Vue实例，并将其挂在到Vue原型上，这样其他组件就可以通过`this.$bus`访问到它。

接下来，在其他组件中，可以通过`this.$bus`来访问App.vue中的数据：

// OtherComponent.vue
export default {
  created() {
    console.log(this.$bus.message) // 输出：Hello World!
  }
}

在上面的代码中，我们在OtherComponent.vue中使用`this.$bus.message`访问了App.vue中的数据。

需要注意的是，使用全局事件总线需要注意避免命名冲突，因为所有组件都可以访问它。另外，全局事件总线也不适用于非父子关系的组件之间通信。如果需要跨级组件通信，可以考虑使用Vuex等状态管理工具。

相关问题

Vue3中通过app.config.globalProperties使用全局变量的示例

在 Vue 3 中，你可以使用 `app.config.globalProperties` 来定义和使用全局变量。下面是一个示例，展示如何在 Vue 3 中使用 `app.config.globalProperties` 来定义和访问全局变量：

// main.js

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 定义全局变量
app.config.globalProperties.$globalVariable = 'Hello, world!';

app.mount('#app');

在上述示例中，我们在 `main.js` 文件中使用 `app.config.globalProperties` 来定义全局变量 `$globalVariable`，并将其设置为 `'Hello, world!'`。

然后，在组件中可以通过 `this.$globalVariable` 来访问全局变量：

<template>
  <div>
    <p>{{ $globalVariable }}</p>
    <button @click="updateGlobalVariable">Update Global Variable</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateGlobalVariable() {
      this.$globalVariable = 'Updated Global Variable';
    }
  }
};
</script>

在上述示例的组件中，我们通过 `this.$globalVariable` 来访问全局变量，并可以在方法中更新全局变量的值。

通过 `app.config.globalProperties`，可以在 Vue 3 中方便地定义和使用全局变量。但是请注意，滥用全局变量可能会导致代码可维护性和可测试性的问题，所以请谨慎使用。

uniapp在app.vue页面使用全局变量

要在`app.vue`中使用全局变量，可以在`main.js`中定义一个Vue实例，并将其作为全局变量挂载到Vue原型上。例如：

import Vue from 'vue'
import App from './App.vue'

Vue.prototype.$globalVar = {
  foo: 'bar',
  baz: 'qux'
}

new Vue({
  render: h => h(App),
}).$mount('#app')

然后在`app.vue`中可以通过`this.$globalVar`来访问全局变量。

<template>
  <div>
    <p>foo: {{ $globalVar.foo }}</p>
    <p>baz: {{ $globalVar.baz }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$globalVar.foo)
  }
}
</script>