欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-24 17:22:20
在开发组件的时候,一定会遇到组件的通信,比如点击一个图标出现弹窗和蒙层,这三个分别是不同的组件。管理他们之间的状态就成了问题。 props双向绑定 通过 sync 双向...

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

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)

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