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

发布时间：2020-12-17 02:55:28 所属栏目：百科来源：网络整理

导读：在开发组件的时候，一定会遇到组件的通信，比如点击一个图标出现弹窗和蒙层，这三个分别是不同的组件。管理他们之间的状态就成了问题。 props双向绑定通过 sync 双向绑定，属性变化会同步到所有组件，这也是最简单的实现方式，缺点是属性会比较多。实现方式

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

通过 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 文件

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

App.vue 文件

component/dialog/index.vue 文件

component/dialog-icon/index.vue 文件

component/mask/index.vue 文件

vuex/store.js 文件

Vue.use(Vuex)

const state = {
isHideMask: true,isHideDialog: true
}

const store = new Vuex.Store({
state,mutations
})

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

export default store

vuex/mutations.js 文件

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

vuex/mutations-types.js 文件

vuex/action.js 文件

dispatch(HIDEDIALOG)

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!