vue學習--元件之間的傳值方式
阿新 • • 發佈:2020-01-16
1、概述
vue由多個元件構成頁面,在不同的元件中有不同的聯絡,元件之間的傳值是十分有必要的
2、父子元件之間傳值 --props和$emit
父傳子:通過props
方法:子元件:props:['msg']
父元件:<Child :msg="message" @changeData="getChildData"></Child>
子傳父:通過$emit事件觸發
方法:子元件:this .$emit('changeData',this.childMsg)
父元件:<Child :msg="message" @changeData="getChildData"></Child>
3、非父子元件之間的傳值 -- 中間元件方式
方法:建立一個第三方元件--bus,用bus元件進行事件的觸發與監聽,相當於一箇中間件一樣。
例項程式碼:
Bus.js: import Vue from 'vue'; const Bus = new Vue(); export default Bus;
觸發:bus.$emit('busEvent',this.childMsg)
監聽:Bus.$on('busEvent',(res)=>{ console.log('bus監聽到了'); console.log(res); })
4、各種元件之間傳值 -- vuex儲存
vuex類似一個倉庫,存放的資料在vue中任何地方可以引用
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { //this.$store.state.count呼叫 count: 233 }, getters: { getCount(state) { //this.$store.getters.getCount呼叫 return state.count; } }, mutations: { //同步修改 addCount(state) { // state.count++ }, reduceCount(state) { //this.$store.commit('reduceCount')呼叫 state.count-- } }, actions: { //非同步修改 addCountAsync(context) { //this.$store.dispatch('addCountAsync')呼叫陪你過 setTimeout(() => { context.commit('addCount') }, 1000) } }, modules: { } })
程式碼連