随着组件的细化，就会遇到多组件状态共享的情况，今天我们介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况，感兴趣的可以了解一下
随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。
创建store对象
首先创建一个 store.js，包含一个 store和一个 mutations，分别用来指向数据和处理方法。
//store.js import Vue from 'vue'; export let store =Vue.observable({count:0,name:'李四'}); export let mutations={ setCount(count){ store.count=count; }, changeName(name){ store.name=name; } }
把store对象应用在不同组件中
然后再在组件中使用该对象
//obserVable.vue <div> <h1>跨组件数据状态<strong style="color:transparent">本文来源gao@daima#com搞(%代@#码网@</strong>共享 obserVable</h1><div> </div></div>
//组件a <div class="bk"> <span><h1>a组件</h1> {{ count }}--{{ name }}</span><button>当前a组件中+1</button><button>当前a组件中-1</button></div> .bk { background: lightpink; }
//组件b <div class="bk"> <h1>b组件</h1> {{ count }}--{{ name }} <button>当前b组件中+1</button><button>当前b组件中-1</button></div> .bk { background: lightgreen; }
显示效果
以上就是Vue局部组件数据共享Vue.observable()的使用的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue局部组件数据共享Vue.observable()的使用
转载请注明原文链接：Vue局部组件数据共享Vue.observable()的使用
