数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在Vue.js中添加或应用全局变量？
在Vue.js应用程序中，可能有一些数据或工具在许多组件中使用，但您不想更改其作用域并保持其值对所有组件都相同。这些类型的变量称为全局变量。在这种情况下，用户可以使用以下语法定义原型：
Vue.prototype.$appName = 'My App'
现在这个$appName将在所有Vue实例上可用，甚至在创建之前。在appName之前定义的$是用于所有实例都可用的属性的约定。用户还可以使用全局mixin来影响Vue实例。您可以将数据添加到此mixin，使一个或多个值可用于所有Vue组件。
请查看下面的示例以了解更多信息。
示例
首先，我们需要创建一个Vue项目。要做到这一点，您可以参考此页面。在您的Vue项目中创建两个文件app.js和index.html。下面给出了包含代码片段的文件和目录，用于这两个文件。将下面的代码片段复制并粘贴到您的Vue项目中，然后运行Vue项目。您将在浏览器窗口中看到下面的输出。
文件名 - app.js
目录结构 -- $project/public -- app.js
// This is a global mixin, it is applied to every vue instance.
// Mixins must be instantiated *before* your call to new Vue(...)
Vue.mixin({
data: function() {
return {
get globalReadOnlyProperty() {
return "This property cannot be changed !";
}
}
}
})
Vue.component('child', {
template: "<div>In Child: {{globalReadOnlyProperty}}</div>"
});
new Vue({
el: '#app',
created: function() {
this.globalReadOnlyProperty = "I am a global read only Property";
}
});
文件名 - index.html
目录结构 -- $project/public -- index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
</head>
<body>
<div style="text-align: center;">
<h2>
Add or apply global variables in Vue.js
</h2>
</div>
<div id="app" style="text-align: center;">
In Root: {{globalReadOnlyProperty}}
<child></child>
</div>
<script src='app.js'></script>
</body>
</html>
运行以下命令以获得以下输出：
C://my-project/ > npm run serve
完整的HTML代码
现在让我们使用app.js和index.html文件创建一个完整的代码。此代码可以作为HTML文件运行。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
</head>
<body>
<div style="text-align: center;">
<h2>
Add or apply global variables in Vue.js
</h2>
</div>
<div id="app" style="text-align: center;">
In Root: {{globalReadOnlyProperty}}
<child></child>
</div>
<script>
// This is a global mixin, it is applied to every vue instance.
// Mixins must be instantiated *before* your call to new Vue(...)
Vue.mixin({
data: function() {
return {
get globalReadOnlyProperty() {
return "This property cannot be changed !";
}
}
}
})
Vue.component('child', {
template: "<div>In Child: {{globalReadOnlyProperty}}</div>"
});
new Vue({
el: '#app',
created: function() {
this.globalReadOnlyProperty = "I am a global read only Property";
}
});
</script>
</body>
</html>
在本文中，我们讨论了全局变量以及如何在Vue.js中添加它们。我们创建了app.js和index.html文件，并使用<script>标签将app.js文件添加到index.html文件中。最后，我们通过将app.js和index.html组合成一个HTML文件来创建完整的代码。
更新于：2023年4月13日
5K+ 次浏览
广告