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: {

    }
})
 

程式碼連