详解vue跨组件通信的几种方法

2024-02-19 18:58:01 139

在开发组件的时候，一定会遇到组件的通信，比如点击一个图标出现弹窗和蒙层，这三个分别是不同的组件。管理他们之间的状态就成了问题。

props双向绑定

通过sync双向绑定，属性变化会同步到所有组件，这也是最简单的实现方式，缺点是属性会比较多。实现方式如下

App.vue文件

component/dialog/index.vue文件

component/dialog-icon/index.vue文件

component/mask/index.vue文件

自定义事件

子组件$dispatch()派发事件传递给父组件，父组件$broadcast()广播事件传递给子组件，这种方式虽然减少了props的使用，但是需要额外定义几个事件，状态多了就会变得很复杂，实现方法如下

App.vue文件

component/dialog-icon/index.vue文件

component/dialog/index.vue文件

component/mask/index.vue文件

Vuex

状态统一放store管理，修改状态通过mutations，组件通过action调用mutations，虽然有点绕，但是所有东西放一起后期会更好维护，实现方法如下

App.vue文件

component/dialog/index.vue文件

component/dialog-icon/index.vue文件

component/mask/index.vue文件

vuex/store.js文件

importVuefrom'vue'
importVuexfrom'vuex'
importmutationsfrom'./mutations'

Vue.use(Vuex)

conststate={
isHideMask:true,
isHideDialog:true
}

conststore=newVuex.Store({
state,
mutations
})

if(module.hot){
module.hot.accept(['./mutations'],()=>{
constmutations=require('./mutations').default
store.hotUpdate({
mutations
})
})
}

exportdefaultstore

vuex/mutations.js文件

import{
HIDEDIALOG
}
from'./mutation-types'

export
default{
[HIDEDIALOG](state){
state.isHideDialog=!state.isHideDialog
state.isHideMask=!state.isHideMask
}
}

vuex/mutations-types.js文件

exportconstHIDEDIALOG='HIDEDIALOG'

vuex/action.js文件

import{HIDEDIALOG}from'./mutation-types'
exportconsthideDialog=({dispatch})=>dispatch(HIDEDIALOG)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

详解vue跨组件通信的几种方法

热门推荐

随机推荐