Question

在Vue.js 0.12中，很容易将一个变量从根组件一直传递给它的子组件：你只需要在任何需要父组件数据的组件上使用inherit: true。 p>

Vue.js 1.0删除了使用inherit: true的功能。可以理解的是，你不应该一直在任何地方继承所有东西。

然而，这是从0.12升级到1.0的问题。我的组件中充满了inherit，大多数只能使它从根组件中获取重要的配置变量baseurl。这样的变量肯定应该由任何有链接的组件知道。

<a href="{{ baseurl }}/page">Link</a>

我可以将配置文件传递给每个组件，但这看起来多余且笨重。

<c0 :config="{baseurl: 'example.com'}"></c0>

<c1 :config="config"></c1>

<c2 :config="config"></c2>

<c3 :config="config"></c3>

为所有组件创建全局范围的任何好方法？

Answer 1

这可能不是最好的解决方案，但它有效并且不会太麻烦。我只是设置了一个getter原型方法。

Vue.prototype.$config = function (key) { 
  var config = this.$root.$get('config');

  if (config) {
    return config[key];
  } 

  return '';
}

<a href="{{ $config('baseurl') }}/page">Link</a>

任何组件都可以访问。

Answer 2

如果您在Vue设置中使用webpack之类的东西，那么您可以使用ES6 modules / import语句在项目中共享变量。

main.js：

import Vue from 'vue'
import config from './config.js'
import thing from './thing.js'

config.setColor('green');

var vm = new Vue({
   el: "#app",
   components: { thing },
   template: '<thing></thing>'
});

config.js：

var color = 'blue';

export default {
   getColor: function () {
      return color;
   },
   setColor: function (val) {
      color = val;
   }
}

thing.js：

import config from './config.js'

export default {
   name: 'thing',
   template: '<div>thing</div>',
   created: function () {
      console.log(config.getColor());
      // green
   }
}

Answer 3

看看：vue-config

npm install vue-config

const vueConfig = require('vue-config')
const configs = {
  API: 'http://localhost:6003' // It's better to require a config file
}

Vue.use(vueConfig, configs)

// A param named `$config` will be injected in to every 
// component, so in your component, you can get config easily
const API = this.$config.API

vuex对于定义常量可能太重了。但是，一旦你的问题解决了，你必须看看Vuex。

Answer 4

这很容易。您需要做的就是在“main.js”文件的“数据”区域中设置它。我不确定为什么所有其他答案都会使事情复杂化。

new Vue({
  data: {
    API: "http://localhost:8080"
  },
  router,
  vuetify,
  render: h => h(App)
}).$mount('#app')

然后在任何组件中，您都可以通过“this.$root”访问它

console.log(this.$root.API);

在Vue.js中创建一个全局变量

4 个答案: