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组件进行事件的触发与监听，相当于一个中间件一样。

实例代码:

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

    }
})

5、在main.js文件定义全局bus

所谓的订阅发布者模式，对一个bus对象，通过它进行事件的监听与触发

在main.js文件中定义：



触发事件用：



监听事件用：



注意在一个组件里可能会多次挂载bus的监听事件，导致监听事件多次触发，可以用钩子函数对监听事件进行解绑：

用于无之间关系的组件的通信

代码连接