我需要在每个组件中访问我的hostname
变量。
将它放在data
中是一个好主意吗?
如果这样做,我理解得对吗?我将能够在任何地方使用 this.hostname
调用它吗?
我需要在每个组件中访问我的hostname
变量。
将它放在data
中是一个好主意吗?
如果这样做,我理解得对吗?我将能够在任何地方使用 this.hostname
调用它吗?
由于每个组件都需要访问您的主机名变量,并在开发模式下将其更改为localhost,或在生产模式下更改为生产主机名,因此您可以在原型中定义此变量。
像这样:
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://hostname' : 'http://localhost:3000'
文档中有一个例子: 添加实例属性的文档
有关生产提示配置的更多信息可在此处找到:
警告:下面的答案使用的是 Vue 1.x。在Vue 2.x中,twoWay
数据变异已被删除(幸运的是!)。
对于“全局”变量——即附加到全局对象上的变量,在Web浏览器中就是window对象,最可靠的声明变量的方法是显式地将其设置在全局对象上:
window.hostname = 'foo';
然而从Vue的层次结构角度来看(根视图模型和嵌套组件),数据可以向下传递(如果指定了双向绑定,还可以向上修改)。
例如,如果根视图模型有一个hostname
数据,可以通过v-bind
指令将值绑定到嵌套组件,如v-bind:hostname="hostname"
或简写为:hostname="hostname"
。
在组件内部,绑定的值可以通过组件的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' 应该是一个 双向绑定
的数据。
因此,通过修改组件中的数据,父组件的数据也会相应地改变。
例如:
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>
我强烈推荐你查看Vuex,它专为在Vue中实现全局访问数据而设计。
如果你只需要一些基本变量且永远不会被修改,我建议使用ES6导入:
// config.js
export default {
hostname: 'myhostname'
}
// .vue file
import config from 'config.js'
console.log(config.hostname)
您也可以以同样的方式导入json
文件,这样可以由不具备编码知识的人编辑或导入到SASS中。
对于任何单文件组件用户,这里是我如何设置全局变量:
Assuming you are using Vue-Cli's webpack template
Declare your variable(s) in somewhere variable.js
const shallWeUseVuex = false;
Export it in variable.js
module.exports = { shallWeUseVuex : shallWeUseVuex };
Require
and assign it in your vue file
export default {
data() {
return {
shallWeUseVuex: require('../../variable.js')
};
}
}
参考: https://v2.vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch
本文介绍了从头开始实现简单状态管理的方法。它提供了一个事件总线和一个全局状态对象,以便在Vue组件之间共享数据。通过简单的示例代码,您可以了解如何将这些工具集成到您的应用程序中,从而更好地组织和管理您的数据。import
而不是require
和export default
而不是module.exports =
)。 - Fabian von Ellertswindow.basurl="http://localhost:8000/";
你也可以使用 window.basurl 在任何组件中访问该变量。
一种可能性是在index.html中声明变量,因为它是真正的全局变量。可以通过添加JavaScript方法来返回变量的值,并且它将是只读的。
这种解决方案的示例可以在以下答案中找到: https://dev59.com/5FgR5IYBdhLWcg3ww_oz#62485644
Object.defineProperty(Vue.prototype, '$hostname', { value: 'http://localhost:3000' })
。您可以在这篇文章中了解更多详细信息:https://dzone.com/articles/use-any-javascript-library-with-vuejs - Ulysse BN$hostname
而不是hostname
吗?这只是自定义属性的样式惯例,还是为了避免属性名称冲突? - Digital Ninja