如何在 vue.js 中全局公开 app.vue 中的变量

Question

我正在使用 vuejs 来开发我的应用程序模块，我将获取我需要在 App.vue 中设置为变量 this.gblData 的数据。

我将构建 vue 应用程序并将其集成到另一个应用程序中。有没有办法在父应用程序中公开变量 gblData。

Answer 1

选项 1：创建全局变量

const gblData = "something";

公开全局变量：

new Vue({
    data:{
        gblData
    }
})

选项 2：在原型中定义全局变量。

Vue.prototype.$gblData = "something";

你现在可以在任何 Vue 组件中使用此变量，如下所示：

console.log(this.$gblData);

Answer 2

是的，您可以通过对象传递此变量window：

// set
window.gblData = "something";
// get
console.log(window.gblData);

Answer 3

在 vue3 中：

// Vue3
const app = Vue.createApp({})
app.config.globalProperties.gblData = 'something'

app.component('a-child-component', {
  mounted() {
    console.log(this.gblData) // 'something'
  }
})