我想在整个页面中更改下面的全局变量
Vue.prototype.$color = 'green';
我尝试使用下面的代码,但它只在我创建的组件中更改
watch: { cor(newValue,oldVlue) { this.$color = newValue; } }
解决方法
要全局使用$color,您可以使用
Mixin,更具体地说是
Global Mixin.
如果您只希望它是只读的,那么这是最简单的解决方案(更少的代码).请参阅代码段:
Vue.mixin({ created: function () { this.$color = 'green'; } }) new Vue({ el: '#app1',data: { message: 'Hello Vue.js!' },mounted() { console.log('$color #app1:',this.$color); } }) new Vue({ el: '#app2',mounted() { console.log('$color #app2:',this.$color); } })
<script src="https://unpkg.com/vue@2.5.15/dist/vue.min.js"></script> <div id="app1"> <p>app1: {{ message }}</p> </div> <div id="app2"> <p>app2: {{ message }}</p> </div>
使颜色反应灵敏
要使Vue在任何地方做出反应以改变$color,您可以使用Vuex商店(see other answer).
但是如果您不想仅仅为此使用Vuex,另一种可能性是创建一个Vue实例来保存“共享”数据.之后,创建一个带有计算属性的mixin,该属性引用此“共享”Vue实例的$data.见下面的演示.
// not using a Vuex store,but a separated Vue instance to hold the data // only use this if you REALLY don't want to use Vuex,because Vuex is preferrable let globalData = new Vue({ data: { $color: 'green' } }); Vue.mixin({ computed: { $color: { get: function () { return globalData.$data.$color },set: function (newColor) { globalData.$data.$color = newColor; } } } }) // this.$color will be available in all Vue instances... new Vue({ el: '#app1' }) new Vue({ el: '#app2' }) // ...and components Vue.component('my-comp',{template: '#t3'}); new Vue({ el: '#app3',})
<script src="https://unpkg.com/vue@2.5.15/dist/vue.min.js"></script> <div id="app1">Color: {{ $color }} <button @click="$color = 'red'">change to red</button></div> <div id="app2">Color: {{ $color }} <button @click="$color = 'yellow'">change to yellow</button></div> <template id="t3"> <div>Color: {{ $color }} <button @click="$color = 'purple'">change to purple</button></div> </template> <div id="app3"><my-comp></my-comp></div>
为了完整性,请查看下面的内容,了解如何使用Vuex和Mixin(有关如何使用Vuex in the other answer的更多详细信息).
// Using a Vuex to hold the "shared" data // The store is not added to any instance,it is just referenced directly in the mixin const store = new Vuex.Store({ state: { $color: 'green' },mutations: { update$color: function(state,newColor) { state.$color = newColor; } } }); Vue.mixin({ computed: { $color: { get: function() { return store.state.$color },set: function(newColor) { return store.commit('update$color',newColor); } } } }) // this.$color will be available in all Vue instances... new Vue({ el: '#app1' }) new Vue({ el: '#app2' }) // ...and components Vue.component('my-comp',})
<script src="https://unpkg.com/vue@2.5.15/dist/vue.min.js"></script> <script src="https://unpkg.com/vuex@3.0.1/dist/vuex.min.js"></script> <div id="app1">Color: {{ $color }} <button @click="$color = 'red'">change to red</button></div> <div id="app2">Color: {{ $color }} <button @click="$color = 'yellow'">change to yellow</button></div> <template id="t3"> <div>Color: {{ $color }} <button @click="$color = 'purple'">change to purple</button></div> </template> <div id="app3"><my-comp></my-comp></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。