vue学习--组件之间的传值方式

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

    }
})

代码连接