详解vue跨组件通信的几种方法
更新时间：2017年06月15日 10:08:40 作者：慕容小凡
本篇文章主要介绍了详解vue跨组件通信的几种方法 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在开发组件的时候，一定会遇到组件的通信，比如点击一个图标出现弹窗和蒙层，这三个分别是不同的组件。管理他们之间的状态就成了问题。
props双向绑定
通过 sync 双向绑定，属性变化会同步到所有组件，这也是最简单的实现方式，缺点是属性会比较多。实现方式如下
App.vue 文件
<template>
<div id="app">
<mask :hide-mask.sync="hideMask"></mask>
<dialog :hide-dialog.sync="hideDialog" :hide-mask.sync="hideMask"></dialog>
<dialog-icon :hide-dialog.sync="hideDialog" :hide-mask.sync="hideMask"></dialog-icon>
</div>
</template>
<script>
import mask from './components/mask/index'
import dialog from './components/dialog/index'
import dialogIcon from './components/dialog-icon/index'
export default {
components: {
mask,
dialog,
dialogIcon
},
data () {
return {
hideMask: true,
hideDialog: true
}
}
}
</script>
component/dialog/index.vue 文件
<template>
<section class="dialog" :class="{ 'hide': hideDialog }">
<div class="dialog-close" @click="hide()"></div>
</section>
</template>
<script>
export default {
props: ['hideDialog', 'hideMask'],
methods: {
hide () {
this.hideDialog = !this.hideDialog
this.hideMask = !this.hideMask
}
}
}
</script>
component/dialog-icon/index.vue 文件
<template>
<section class="dialog-icon" @click="show()">点击出现弹窗</section>
</template>
<script>
export default {
props: ['hideDialog', 'hideMask'],
methods: {
show () {
this.hideDialog = !this.hideDialog
this.hideMask = !this.hideMask
}
}
}
</script>
component/mask/index.vue 文件
<template>
<div class="mask" :class="{ 'hide': hideMask }"></div>
</template>
<script>
export default {
props: ['hideMask']
}
</script>
自定义事件
子组件 $dispatch() 派发事件传递给父组件，父组件 $broadcast() 广播事件传递给子组件，这种方式虽然减少了props的使用，但是需要额外定义几个事件，状态多了就会变得很复杂，实现方法如下
App.vue 文件
<template>
<div id="app">
<mask></mask>
<dialog></dialog>
<dialog-icon></dialog-icon>
</template>
<script>
import mask from './components/mask/index'
import dialog from './components/dialog/index'
import dialogIcon from './components/dialog-icon/index'
export default {
components: {
mask,
dialog,
dialogIcon
},
data () {
return {
hideMask: true,
hideDialog: true
}
},
events: {
'dialog-dispatch' () {
this.hidedialog = !this.hidedialog
this.$broadcast('dialog-broadcast')
},
'mask-dispatch' () {
this.hideMask = !this.hideMask
this.$broadcast('mask-broadcast')
}
}
}
</script>
component/dialog-icon/index.vue 文件
<template>
<section class="dialog-icon" @click="show()">点击出现弹窗</section>
</template>
<script>
export default {
methods: {
show () {
this.$dispatch('dialog-dispatch')
this.$dispatch('mask-dispatch')
}
},
events: {
'dialog-broadcast' () {
this.hideDialog = !this.hideDialog
}
},
data () {
return {
hideDialog: this.$parent.hideDialog,
hideMask: this.$parent.hideMask
}
}
}
</script>
component/dialog/index.vue 文件
<template>
<section class="dialog" :class="{ 'hide': hideDialog }">
<div class="dialog-close" @click="hide()"></div>
</section>
</template>
<script>
export default {
methods: {
hide () {
this.$dispatch('dialog-dispatch')
this.$dispatch('mask-dispatch')
}
},
events: {
'dialog-broadcast' () {
this.hideDialog = !this.hideDialog
}
},
data () {
return {
hideDialog: this.$parent.hideDialog,
hideMask: this.$parent.hideMask
}
}
}
</script>
component/mask/index.vue 文件
<template>
<div class="mask" :class="{ 'hide': hideMask }"></div>
</template>
<script>
export default {
data () {
return {
hideMask: this.$parent.hideMask
}
},
events: {
'mask-broadcast' () {
this.hideMask = !this.hideMask
}
}
}
</script>
Vuex
状态统一放store管理，修改状态通过mutations，组件通过action调用mutations，虽然有点绕，但是所有东西放一起后期会更好维护，实现方法如下
App.vue 文件
<template>
<div id="app">
<mask></mask>
<dialog></dialog>
<dialog-icon></dialog-icon>
</div>
</template>
<script>
import mask from './components/mask/index'
import dialog from './components/dialog/index'
import dialogIcon from './components/dialog-icon/index'
export default {
components: {
mask,
dialog,
dialogIcon
}
}
</script>
component/dialog/index.vue 文件
<template>
<section class="storehouse dialog" :class="{ 'hide': isHideDialog }">
<div class="dialog-close" @click="hideDialog()"></div>
</section>
</template>
<script>
import { hideDialog } from '../../vuex/actions'
export default {
vuex: {
state: {
isHideDialog: state => state.isHideDialog
},
actions: {
hideDialog
}
}
}
</script>
component/dialog-icon/index.vue 文件
<template>
<section class="storehouse-icon" @click="hideDialog()">点击出现弹窗</section>
</template>
<script>
import { hideDialog } from '../../vuex/actions'
export default {
vuex: {
actions: {
hideDialog
}
}
}
</script>
component/mask/index.vue 文件
<template>
<div class="mask" :class="{ 'hide': isHideMask }"></div>
</template>
<script>
export default {
vuex: {
state: {
isHideMask: state => state.isHideMask
}
}
}
</script>
vuex/store.js 文件
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
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 文件
import {
HIDEDIALOG
}
from './mutation-types'
export
default {
[HIDEDIALOG] (state) {
state.isHideDialog = !state.isHideDialog
state.isHideMask = !state.isHideMask
}
}
vuex/mutations-types.js 文件
export const HIDEDIALOG = 'HIDEDIALOG'
vuex/action.js 文件
import { HIDEDIALOG } from './mutation-types'
export const hideDialog = ({ dispatch }) => dispatch(HIDEDIALOG)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了基于脚手架创建Vue项目实现步骤详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
Vue中使用vue-plugin-hiprint插件进行打印的功能实现
hiprint 是一个web 打印的js组件,无需安装软件,支持windows,macOS,linux 系统,支持移动端,PC端浏览器,angular,vue,react 等 分页预览,打印,操作简单,运行快速,本文介绍了Vue中使用vue-plugin-hiprint插件进行打印,需要的朋友可以参考下2025-04-04
Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js，这篇文章主要介绍了axios在Vue3中的使用,需要的朋友可以参考下2023-07-07
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
这篇文章主要介绍了基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
这篇文章主要介绍了Vue3 组件库的环境配置搭建过程,使用 Vite+Ts 开发的是 Vue3 组件库,所以我们需要安装 typescript、vue3,同时项目将采用 Less 进行组件库样式的管理，需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue-router-link选择样式设置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了如何解决模块““vue“”没有导出的成员“ref”问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
文件拖拽上传功能现在已经随处可见,大家应该都用过了吧,那么它具体是怎么实现的大家有去了解过吗,今天我们一起来实现一下这个功能,并封装一个拖拽上传组件吧2024-03-03
Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI，下面这篇文章主要给大家介绍了关于利用vue + element-ui如何实现简洁的导入导出功能的相关资料，需要的朋友可以参考下。2017-12-12
这篇文章主要介绍了Vue.Draggable实现拖拽效果，使用简单方便 ，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
最新评论