Vue局部組件數(shù)據(jù)共享Vue.observable()的使用
隨著組件的細(xì)化,就會(huì)遇到多組件狀態(tài)共享的情況, Vuex當(dāng)然可以解決這類(lèi)問(wèn)題,不過(guò)就像 Vuex官方文檔所說(shuō)的,如果應(yīng)用不夠大,為避免代碼繁瑣冗余,最好不要使用它,今天我們介紹的是 vue.js 2.6 新增加的 Observable API ,通過(guò)使用這個(gè) api 我們可以應(yīng)對(duì)一些簡(jiǎn)單的跨組件數(shù)據(jù)狀態(tài)共享的情況。
創(chuàng)建store對(duì)象首先創(chuàng)建一個(gè) store.js,包含一個(gè) store和一個(gè) mutations,分別用來(lái)指向數(shù)據(jù)和處理方法。
//store.jsimport 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對(duì)象應(yīng)用在不同組件中
然后再在組件中使用該對(duì)象
//obserVable.vue<template> <div> <h1>跨組件數(shù)據(jù)狀態(tài)共享 obserVable</h1> <div> <top></top> <bottom></bottom> </div> </div></template><script>import top from ’./components/top.vue’;import bottom from ’./components/bottom.vue’;export default { name: ’obserVable’, components: { top, bottom }};</script><style scoped></style>
//組件a<template> <div class='bk'> <span ><h1>a組件</h1> {{ count }}--{{ name }}</span > <button @click='setCount(count + 1)'>當(dāng)前a組件中+1</button> <button @click='setCount(count - 1)'>當(dāng)前a組件中-1</button> </div></template><script>import { store, mutations } from ’@/store’;export default { computed: { count() { return store.count; }, name() { return store.name; } }, methods: { setCount: mutations.setCount, changeName: mutations.changeName }};</script><style scoped>.bk { background: lightpink;}</style>
//組件b<template> <div class='bk'> <h1>b組件</h1> {{ count }}--{{ name }} <button @click='setCount(count + 1)'>當(dāng)前b組件中+1</button> <button @click='setCount(count - 1)'>當(dāng)前b組件中-1</button> </div></template><script>import { store, mutations } from ’@/store’;export default { computed: { count() { return store.count; }, name() { return store.name; } }, methods: { setCount: mutations.setCount, changeName: mutations.changeName }};</script><style scoped>.bk { background: lightgreen;}</style>
顯示效果

到此這篇關(guān)于Vue局部組件數(shù)據(jù)共享Vue.observable()的使用的文章就介紹到這了,更多相關(guān)Vue.observable() 數(shù)據(jù)共享內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. IntelliJ IDEA恢復(fù)刪除文件的方法2. IntelliJ IDEA配置Tomcat服務(wù)器的方法3. idea刪除項(xiàng)目的操作方法4. 使用Maven 搭建 Spring MVC 本地部署Tomcat的詳細(xì)教程5. IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法6. IntelliJ IDEA導(dǎo)入jar包的方法7. idea重置默認(rèn)配置的方法步驟8. idea導(dǎo)入maven項(xiàng)目的方法9. Docker 部署 Prometheus的安裝詳細(xì)教程10. IntelliJ IDEA調(diào)整字體大小的方法

網(wǎng)公網(wǎng)安備