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

Question

我正在使用 vuejs 来开发我的应用程序模块，我将获取需要设置为 App.vue 中的变量 ex this.gblData 的数据。我将构建 vue 应用程序并将其集成到另一个应用程序中。有没有办法在父应用程序中公开变量 gblData。

Answer 1

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

// set

window.gblData = "something";

// get

console.log(window.gblData);

Answer 2

选项 1：创建全局变量

const gblData = "something";

公开您的全局变量：

new Vue({

    data:{

        gblData

    }

})

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

Vue.prototype.$gblData = "something";

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

console.log(this.$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'

  }

})