使購物車的徽標(biāo)數(shù)字和購買數(shù)量一致
- 當(dāng)數(shù)字選擇框改變時，把購買的數(shù)量傳遞給父組件，子組件向父組件傳值（事件調(diào)用）
- 事件調(diào)用的本質(zhì)：父組件向子組件傳遞方法，子組件調(diào)用這個方法佩迟，同時把數(shù)據(jù)當(dāng)作參數(shù)傳遞這個方法
getSelectedCount(count){
this.selectedCount=count
}
<numbox @getcount="getSelectedCount"></numbox>
- 在子組件中監(jiān)聽文本框的change事件团滥，每當(dāng)文本框數(shù)據(jù)被改變的時候竿屹，立即把最新的數(shù)據(jù)傳遞給父組件
<input id="test" class="mui-input-numbox" type="number" value="1" @change="countChanged" ref="numbox"/>
countChanged(){
this.$emit('getcount',parseInt(this.$refs.numbox.value))
}
vuex
- 是vue配套的公共數(shù)據(jù)管理工具，它可以把一些共享的數(shù)據(jù)保存到vuex中灸姊，方便整個程序的任何組件直接獲取或修改公共數(shù)據(jù)
- vuex是為了保存組件之間共享數(shù)據(jù)而誕生的拱燃，如果組件之間有要共享的數(shù)據(jù)，可以直接掛載到vuex中力惯，而無需通過父子組件傳值
- props和vuex和data的區(qū)別：
- vuex是一個全局的共享數(shù)據(jù)存儲區(qū)域碗誉，就相當(dāng)于是一個數(shù)據(jù)的倉庫
- data存放組件內(nèi)部的私有數(shù)據(jù)
- props存放父組件傳遞的數(shù)據(jù)
- 安裝vuex
npm i vuex --save
- 在模塊打包系統(tǒng)中顯式的通過Vue.use()來安裝vuex
import Vuex from 'vuex'
Vue.use(Vuex)
- new一個Vuex.store()實例得到一個數(shù)據(jù)倉儲對象，state可以當(dāng)作組件中的data用來存儲數(shù)據(jù)
var store=new Vuex.store({
state:{
count:0
},
mutations:{}
})
- 并在vm實例中掛載父晶，與路由掛載相同哮缺，只要掛載到vm中，任何組件都能使用store來存取數(shù)據(jù)
store:store
- 獲取vuex中的數(shù)據(jù)
<input type="text" v-model="$store.state.count">
- 如果要操作store中的state值甲喝，只能通過調(diào)用mutations提供的方法才能操作對應(yīng)的數(shù)據(jù)尝苇，不推薦其他組件使用時直接操作（想要增加count值在其他組件中就調(diào)用這個increment方法）
mutations:{
increment(state){
state.count++
}
}
this.$store.commit('increment')
- mutations中的方法最多只能傳入2個參數(shù)，參數(shù)一是state狀態(tài)，參數(shù)二是通過commit提交 過來的參數(shù)
- getters只負責(zé)對外提供數(shù)據(jù)糠溜，不負責(zé)修改數(shù)據(jù)淳玩，與組件中的過濾器比較相似，都沒有修改原數(shù)據(jù)非竿，只是把原數(shù)據(jù)做了一層包裝提供給調(diào)用者蜕着，與computed類似，只要state中的數(shù)據(jù)發(fā)生變化就會立馬觸發(fā)getter的重新求值
getter:{
optCount:function () {
return '最新count值：'+state.count
}
}
{{$store.getter.optCount}}
