http://www.tuicool.com/articles/jyM32mA

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

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跨组件通信的几种方法的更多相关文章

  1. Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)

    Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...

  2. Vue组件通信的几种方法

    上一节说到,vue.js是允许子组件通过props接受父组件的信息,但是不允许父组件通过props接受子组件的信息 1. $emit()和on 当子组件需要向父组件传递数据时,就要用到自定义事件. 使 ...

  3. vue必须掌握之组件通信(7种方法)

    方法一:$emit / props 父组件通过props的方式向子组件传递,子组件通过$emit触发父组件中v-on绑定的自定义事件 <!--父组件--> <template> ...

  4. Vue自定义组件以及组件通信的几种方式

    本帖子来源:小贤笔记 功能 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它 ...

  5. vue-learning:31 - component - 组件间通信的6种方法

    vue组件间通信的6种方法 父子组件通信 prop / $emit 嵌套组件 $attrs / $liteners 后代组件通信 provide / inject 组件实例引用 $root / $pa ...

  6. Regular进阶: 跨组件通信

    本文由作者郑海波授权网易云社区发布. 背景 在组件化不断深入的大环境下,无论使用哪种 MDV 框架都最终会遇到一个头疼的问题,就是「跨组件通信」. 下图是个简单的例子 这里包含「事件通信」和「数据通信 ...

  7. Vue 兄弟组件通信(不使用Vuex)

    Vue 兄弟组件通信(不使用Vuex) 项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下 ...

  8. redux搭配react-redux进行跨组件通信开发

    Redux API 作用 createStore 用于创建一个store对象 bindActionCreators 用于简化操作,不用开发者手动触发dispatch React-redux API 作 ...

  9. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

随机推荐

  1. js 获取某年的某天是第几周

    /** * 判断年份是否为润年 * * @param {Number} year */ function isLeapYear(year) { return (year % 400 == 0) || ...

  2. What's New in Core Data in iOS 7

    What's New in Core Data in iOS 7 该文档主要描述coredata 在ios7的新功能特性. Core Data and iCloud 我们添加改进了对Core Data ...

  3. Bundles

    Bundles 接着在Global.asax文件的Application_Start方法中调用BundleConfig.RegisterBundles方法: protected void Applic ...

  4. 查看Tomcat版本

    在Tomcat的安装目录的bin目录下,有这么两个文件 version.bat    windows下的批处理文件 version.sh      Linux下的Shell脚本 在DOS窗口执行ver ...

  5. 编程实战——电影管理器之界面UI及动画切换

    编程实战——电影管理器之界面UI及动画切换 在前文“编程实战——电影管理器之利用MediaInfo获取高清视频文件的相关信息”中提到电影管理器的目的是方便播放影片,在想看影片时不需要在茫茫的文件夹下找 ...

  6. 为Exchange 2007 SCC 启用 SCR 副本-供需要的人使用!

    SCC 已经部署完整,接下来我们必须防范本地站点如果出现了完全的损坏怎么办? Exchange 2007 SP1 提供了另外一种高可用的方式,就是基于我们的SCR 模型,SCR 模型是基于SCC 本地 ...

  7. VS2012下基于Glut OpenGL glEdgeFlag示例程序:

    glEdgeFlag (GLboolean flag)表示一个顶点是否应该被认为是多边形的一条边界边的起点.flag为GL_TRUE后面的点都被认为是边界上的点,flag为GL_FALSE则之后的点不 ...

  8. redis beforesleep

    本来想把redis main函数附带都读完再写笔记,但实在太大了,所以现在决定一部分一部分地记录. eventloop中在每次进入循环时都会调用beforeSleep回调(因为processevent ...

  9. orchard相关网址

    1.官网文档  http://docs.orchardproject.net/ 2.github  https://github.com/OrchardCMS/Orchard 3.stackoverf ...

  10. Activity和Fragment之间解耦

    看鸿洋博客:http://blog.csdn.net/lmj623565791/article/details/42628537,整理下一些关键点 public class ContentFragme ...