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的监听事件，导致监听事件多次触发，可以用钩子函数对监听事件进行解绑：
