父组件向子组件传递参数用v-bind
子组件向父组件传递参数用this.$emit
兄弟组件传参eventBus或者是用vuex进行传递
下边说说eventBus
首先在src的assets的目录下新建一个vue-bus.js文件
import Vue from 'vue'
export default new Vue()
兄弟组件
a组件
import Bus from '@/assets/js/vue-bus.js'
methods: {
handlerClick(event) {
Bus.$emit('handw', "挖偶")
}
}
b组件
import Bus from '@/assets/js/vue-bus.js'
created(){
Bus.$on('handle2', function (num) {
console.log(num)
})
}
可以有多个兄弟组件通信 通过接收的名字
eventBus使用不善,会造成灾难。vue是单页应用,如果你在某一个页面刷新了之后,与之相关的EventBus会被移除,这样就导致业务走不下去。还要就是如果业务有反复操作的页面,EventBus在监听的时候就会触发很多次,也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到,在vue页面销毁时,同时移除EventBus事件监听。
EventBus.$off('aMsg', {})
全局的eventBus
它们的工作原理是发布/订阅方法,通常称为Pub/Sub
var EventBus = new Vue();
Object.defineProperties(Vue.prototype, {
$bus: {
get: function () {
return EventBus
}
}
})
在这个特定的总线中使用两个方法 $on和$emit。一个用于创建发出的事件,它就是$emit;另一个用于订阅$on:
var EventBus = new Vue();
this.$bus.$emit('nameOfEvent', { ... pass some event data ...});
this.$bus.$on('nameOfEvent',($event) => {
// ...
})
然后我们可以在某个Vue页面使用this.$bus.$emit(“sendMsg”, ‘我是web秀’);,另一个Vue页面使用
this.$bus.$on('updateMessage', function(value) {
console.log(value); // 我是web秀
})
同时也可以使用this.$bus.$off(‘sendMsg’)来移除事件监听。