在 Vue.js 中声明全局变量的最佳方法是什么? [英] What is the best way to declare global variables in Vue.js?

问题描述

我需要在每个组件中访问我的 hostname 变量.

I need access to my hostname variable in every component.

把它放在data里面是个好主意吗?

Is it a good idea to put it inside data?

我的理解是否正确，如果我这样做，我就可以在任何地方使用 this.hostname 调用它?

Am I right in understanding that if I do so, I will able to call it everywhere with this.hostname?

推荐答案

警告: 以下答案是使用 Vue 1.x.twoWay 数据突变已从 Vue 2.x 中移除(幸运的是！).

Warning: The following answer is using Vue 1.x. The twoWay data mutation is removed from Vue 2.x (fortunately!).

如果是全局"变量——附加到全局对象，即网络浏览器中的窗口对象——声明变量的最可靠方法是在全局对象上显式设置它:

In case of "global" variables—that are attached to the global object, which is the window object in web browsers—the most reliable way to declare the variable is to set it on the global object explicitly:

window.hostname = 'foo';

但是，从 Vue 的层次结构透视图(根视图模型和嵌套组件)中，数据可以向下传递(如果指定了 twoWay 绑定，则可以向上变异).

However form Vue's hierarchy perspective (the root view Model and nested components) the data can be passed downwards (and can be mutated upwards if twoWay binding is specified).

例如，如果根 viewModel 有一个 hostname 数据，该值可以通过 v-bind 指令作为 v-bind:hostname="hostname" 或简称 :hostname="hostname".

For instance if the root viewModel has a hostname data, the value can be bound to a nested component with v-bind directive as v-bind:hostname="hostname" or in short :hostname="hostname".

并且在组件内，可以通过组件的 props 属性访问绑定值.

And within the component the bound value can be accessed through component's props property.

最终数据将被代理到 this.hostname 并且可以在需要时在当前 Vue 实例中使用.

Eventually the data will be proxied to this.hostname and can be used inside the current Vue instance if needed.

var theGrandChild = Vue.extend({
  template: '<h3>The nested component has also a "{{foo}}" and a "{{bar}}"</h3>',
    props: ['foo', 'bar']
});

var theChild = Vue.extend({
  template: '<h2>My awesome component has a "{{foo}}"</h2> 
             <the-grandchild :foo="foo" :bar="bar"></the-grandchild>',
  props: ['foo'],
  data: function() {
    return {
      bar: 'bar'
    };
  },
  components: {
    'the-grandchild': theGrandChild
  }
});


// the root view model
new Vue({
  el: 'body',
  data: {
    foo: 'foo'
  },
  components: {
    'the-child': theChild
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<h1>The root view model has a "{{foo}}"</h1>
<the-child :foo="foo"></the-child>

如果我们需要向上改变父级的数据，我们可以在我们的绑定声明中添加一个 .sync 修饰符，比如 :foo.sync="foo" 和指定给定的道具"应该是 twoWay 绑定数据.

In cases that we need to mutate the parent's data upwards, we can add a .sync modifier to our binding declaration like :foo.sync="foo" and specify that the given 'props' is supposed to be a twoWay bound data.

因此，通过改变组件中的数据，将分别更改父级的数据.

Hence by mutating the data in a component, the parent's data would be changed respectively.

例如:

var theGrandChild = Vue.extend({
  template: '<h3>The nested component has also a "{{foo}}" and a "{{bar}}"</h3> 
             <input v-model="foo" type="text">',
    props: {
      'foo': {
        twoWay: true
      },  
      'bar': {}
    }
});

var theChild = Vue.extend({
  template: '<h2>My awesome component has a "{{foo}}"</h2> 
             <the-grandchild :foo.sync="foo" :bar="bar"></the-grandchild>',
  props: {
    'foo': {
      twoWay: true
    }
  },
  data: function() {
    return { bar: 'bar' };
  },  
  components: {
    'the-grandchild': theGrandChild
  }
});

// the root view model
new Vue({
  el: 'body',
  data: {
    foo: 'foo'
  },
  components: {
    'the-child': theChild
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<h1>The root view model has a "{{foo}}"</h1>
<the-child :foo.sync="foo"></the-child>

这篇关于在 Vue.js 中声明全局变量的最佳方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！