Question

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

将它放在data内是否是个好主意？

我是否正确理解如果我这样做，我将能够通过this.hostname到处调用它？

Answer 1

由于您需要访问每个组件中的hostname变量，并在开发模式下将其更改为localhost，或者在生产模式下更改为www.your-api.com，您可以在原型中定义此变量。 / p>

像这样：

Vue.prototype.$hostname = 'http://localhost:3000'

$ hostname将在所有Vue实例中可用：

new Vue({
  beforeCreate: function () {
    console.log(this.$hostname)
  }
})

就我而言，为了自动从开发变为生产，我根据我实例化Vue的文件中的Vue生产提示变量定义了$ hostname原型。

像这样：

Vue.config.productionTip = false
Vue.prototype.$hostname = (Vue.config.productionTip) ? 'https://www.your-api.com' : 'http://localhost:3000'

可以在文档中找到一个示例： Documentation on Adding Instance Properties

有关生产提示配置的更多信息，请访问：

Vue documantation for production tip

Answer 2

警告：以下答案使用的是Vue 1.x.从Vue 2.x中删除twoWay数据突变（幸运的是！）。我会尽快更新答案。

如果是“全局”变量 - 附加到全局对象（Web浏览器中的窗口对象） - 声明变量的最可靠方法是明确地将其设置在全局对象上：

window.hostname = 'foo';

但是，根据Vue的层次结构透视图（根视图模型和嵌套组件），数据可以向下传递（如果指定了twoWay绑定，则可以向上突变）。

例如，如果根viewModel具有hostname数据，则该值可以绑定到嵌套组件，v-bind指令为v-bind:hostname="hostname"或简称:hostname="hostname"。< / p>

在组件中，可以通过组件的props属性访问绑定值。

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

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"修饰符，并指定给定的'props'应该是{{} 1}}绑定数据。

因此，通过改变组件中的数据，父母的数据将分别改变。

例如：

twoWay

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
  }
});

Answer 3

对于任何单个文件组件用户，以下是我设置全局变量的方法

假设您使用的是Vue-Cli的网络包模板
在某处变量声明你的变量.js
```
const shallWeUseVuex = false;
```

将其导出为variable.js

module.exports = { shallWeUseVuex : shallWeUseVuex };

Require并将其分配到您的vue文件

export default {
    data() {
        return {
            shallWeUseVuex: require('../../variable.js')
        };
    }
}

参考：https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch

Answer 4

我强烈建议您看看Vuex，它是为Vue中可全局访问的数据而设计的。

如果您只需要一些永远不会被修改的基本变量，那么我将使用ES6导入：

// config.js
export default {
   hostname: 'myhostname'
}

// .vue file
import config from 'config.js'

console.log(config.hostname)

您还可以以相同的方式导入json文件，该文件可以由不懂代码的人编辑或导入到SASS中。

Answer 5

在vue cli-3中，您可以像这样在main.js中定义变量

window.basurl =“ http：// localhost：8000 /”;

您还可以通过使用以下命令在任何组件中访问此变量的 window.basurl

Answer 6

一种可能性是在index.html上声明该变量，因为它确实是全局的。可以添加一个javascript方法来返回变量的值，该方法将是只读的。

此解决方案的示例可以在以下答案中找到： https://stackoverflow.com/a/62485644/1178478

Answer 7

vue3 replacement中的this answer：

// Vue3

const app = Vue.createApp({})
app.config.globalProperties.$hostname = 'http://localhost:3000'


app.component('a-child-component', {
  mounted() {
    console.log(this.$hostname) // 'http://localhost:3000'
  }
})

在Vue.js中声明全局变量的最佳方法是什么？

7 个答案: