在Vue.js中声明全局变量的最佳方法是什么? [英] What is the best way to declare global variable 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 by this.hostname?

推荐答案

警告:以下答案是使用Vue1.x.从Vue 2.x中删除了 twoWay 数据突变(很幸运！).

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

对于全局"变量(它们附加到Web浏览器中的窗口对象的全局对象)，最可靠的声明变量的方法是在全局对象上显式设置它:

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的层次结构透视图(根视图模型和嵌套组件)来看，数据可以向下传递(如果指定了双向绑定，则可以向上变异).

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 数据，则可以使用或简称为: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屋！