Ich habe eine Javascript-Variable, die ich bei der Instanziierung global an Vue-Komponenten übergeben möchte, sodass entweder jede registrierte Komponente sie als Eigenschaft hat oder global darauf zugegriffen werden kann.
Hinweis :: Ich muss diese globale Variable für vuejs als READ ONLY- Eigenschaft festlegen
vue-component
vue.js
vuejs2
Kendall ARNEAUD
quelle
quelle
this.globalReadOnlyProperty
.Nur Hinzufügen von Instanzeigenschaften
Beispielsweise können alle Komponenten auf einen globalen
appName
Code zugreifen . Sie schreiben nur einen Zeilencode:Vue.prototype.$appName = 'My App'
$
ist keine Zauberei, sondern eine Konvention, die Vue für Eigenschaften verwendet, die allen Instanzen zur Verfügung stehen.Alternativ können Sie ein Plugin schreiben , das alle globalen Methoden oder Eigenschaften enthält.
quelle
this.$appName = 'Changed'
ändern, bemerken die anderen Komponenten diese Änderung nicht. Wie ändern Sie diese globale Variable?Sie können mixin verwenden und var in so etwas ändern.
// This is a global mixin, it is applied to every vue instance Vue.mixin({ data: function() { return { globalVar:'global' } } }) Vue.component('child', { template: "<div>In Child: {{globalVar}}</div>" }); new Vue({ el: '#app', created: function() { this.globalVar = "It's will change global var"; } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> <div id="app"> In Root: {{globalVar}} <child></child> </div>
quelle
data:
ist eine Funktion. Das obige Beispiel von @amin liefert also eine Kopie des globalen Werts, und sein Beispiel zeigt auch nicht, dass er geändert werden könnte. Wenn Sie veränderbare globale Variablen und Status möchten, sollten Sie Vuex wirklich verwenden.Mit Vuex können Sie alle Ihre globalen Daten verarbeiten
quelle
Wenn die globale Variable von nichts, einschließlich Vuejs, beschrieben werden soll, können Sie
Object.freeze
Ihr Objekt einfrieren. Durch Hinzufügen zu Vues Ansichtsmodell wird es nicht freigegeben. Eine andere Möglichkeit besteht darin, Vuejs eine eingefrorene Kopie des Objekts zur Verfügung zu stellen, wenn das Objekt global geschrieben werden soll, jedoch nicht von Vue:var frozenCopy = Object.freeze(Object.assign({}, globalObject))
quelle
In VueJS 3 mit createApp () können Sie verwenden
app.config.globalProperties
So was:
const app = createApp(App); app.config.globalProperties.foo = 'bar'; app.use(store).use(router).mount('#app');
und rufen Sie Ihre Variable folgendermaßen auf:
app.component('child-component', { mounted() { console.log(this.foo) // 'bar' } })
Wenn Ihre Daten reaktiv sind, möchten Sie möglicherweise VueX verwenden.
quelle
Eine Möglichkeit besteht darin, die Variable in der index.html zu deklarieren, da sie wirklich global ist. Es kann eine Javascript-Methode hinzugefügt werden, um den Wert der Variablen zurückzugeben, und sie wird NUR LESEN. Das hat mir gefallen:
Angenommen, ich habe 2 globale Variablen (var1 und var2). Fügen Sie dem Index.html-Header einfach diesen Code hinzu:
Es ist möglich, für jede Variable eine Methode zu erstellen oder eine einzelne Methode mit einem Parameter zu verwenden.
Diese Lösung funktioniert zwischen verschiedenen Vuejs-Mixins, es ist ein wirklich globaler Wert.
quelle
In Ihrer Datei main.js müssen Sie Vue folgendermaßen importieren:
Dann müssen Sie Ihre globale Variable in der Datei main.js wie folgt deklarieren:
Wenn Sie den Wert der globalen Variablen von einer anderen Komponente aus ändern möchten, können Sie dies folgendermaßen tun:
quelle