VUE组件的通信方式2种方式
父子组件
- 父给子传递数据,通过给子组件添加自定义属性,比如:,list是父组件给子组件传递的数据。子获取父的数据,在子组件中使用props属性获取
- 子给父传递数据,通过给子组件传递父组件的方法,子组件调用父组件的方法传递数据,比如:<List @delete=“deleteHandler”/> ,deleteHandler就是父组件的函数,在子组件中通过this.$emit(‘方法名’,参数),调用父组件的方法,并把数据传递到父组件。
- props是只读,不可以被修改,所有被修改都会失效和被警告
任何关系类型(父子、兄弟、非兄弟)
EventBus
使用方法是创建一个新的Vue实例,需要通信的组件都引入该Vue实例,传递数据的组件使用 event. e m i t ( ′ 名 称 ′ , 参 数 ) 发 送 数 据 , 接 收 数 据 的 组 件 使 用 e v e n t . emit('名称',参数)发送数据,接收数据的组件使用 event. emit(′名称′,参数)发送数据,接收数据的组件使用event.on(‘名称’,方法)接收数据。
# 全局定义
Vue.prototype.$EventBus = new Vue();
# 调用自定义事件
this.$EventBus.$emit('eventName', param1,param2,...)
# 接受数据
this.$EventBus.$on('eventName', this.addTitleHandler(param1,param2,...))
#及时销毁,否则可能造成内存泄漏
beforeDestroy() {
this.$EventBus.$off('onAddTitle', this.addTitleHandler)
}
Vuex
集中管理项目公共数据,Vuex 的状态存储是响应式的,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
EventBus与Vuex的比较
EventBus缺点:
- vue是单页应用,如果你在某一个页面刷新了之后,与之相关的EventBus会被移除,这样就导致业务走不下去。
- 如果页面中有反复操作的业务,EventBus在监听的时候就会触发很多次,需要好好处理EventBus在项目中的关系。
- 在vue页面销毁时,同时移除EventBus事件监听。
EventBus优点
- 解决了多层组件之间繁琐的事件传播,使用原理十分简单,代码量少。适合业简单,组件传递数据较少的项目,大型项目业务复杂的还是尽量使用VueX