詳解vue跨組件通信的幾種方法
更新時(shí)間：2017年06月15日 10:08:40 作者：慕容小凡
本篇文章主要介紹了詳解vue跨組件通信的幾種方法 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
在開(kāi)發(fā)組件的時(shí)候，一定會(huì)遇到組件的通信，比如點(diǎn)擊一個(gè)圖標(biāo)出現(xiàn)彈窗和蒙層，這三個(gè)分別是不同的組件。管理他們之間的狀態(tài)就成了問(wèn)題。
props雙向綁定
通過(guò) sync 雙向綁定，屬性變化會(huì)同步到所有組件，這也是最簡(jiǎn)單的實(shí)現(xiàn)方式，缺點(diǎn)是屬性會(huì)比較多。實(shí)現(xiàn)方式如下
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()">點(diǎn)擊出現(xiàn)彈窗</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() 派發(fā)事件傳遞給父組件，父組件 $broadcast() 廣播事件傳遞給子組件，這種方式雖然減少了props的使用，但是需要額外定義幾個(gè)事件，狀態(tài)多了就會(huì)變得很復(fù)雜，實(shí)現(xiàn)方法如下
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()">點(diǎn)擊出現(xiàn)彈窗</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
狀態(tài)統(tǒng)一放store管理，修改狀態(tài)通過(guò)mutations，組件通過(guò)action調(diào)用mutations，雖然有點(diǎn)繞，但是所有東西放一起后期會(huì)更好維護(hù)，實(shí)現(xiàn)方法如下
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()">點(diǎn)擊出現(xiàn)彈窗</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)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于腳手架創(chuàng)建Vue項(xiàng)目實(shí)現(xiàn)步驟詳解
這篇文章主要介紹了基于腳手架創(chuàng)建Vue項(xiàng)目實(shí)現(xiàn)步驟詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
Vue中使用vue-plugin-hiprint插件進(jìn)行打印的功能實(shí)現(xiàn)
hiprint 是一個(gè)web 打印的js組件,無(wú)需安裝軟件,支持windows,macOS,linux 系統(tǒng),支持移動(dòng)端,PC端瀏覽器,angular,vue,react 等 分頁(yè)預(yù)覽,打印,操作簡(jiǎn)單,運(yùn)行快速,本文介紹了Vue中使用vue-plugin-hiprint插件進(jìn)行打印,需要的朋友可以參考下2025-04-04
Axios是一個(gè)基于Promise的HTTP客戶端，用于瀏覽器和Node.js，這篇文章主要介紹了axios在Vue3中的使用,需要的朋友可以參考下2023-07-07
基于Vue2實(shí)現(xiàn)移動(dòng)端圖片上傳、壓縮、拖拽排序、拖拽刪除功能
這篇文章主要介紹了基于Vue2實(shí)現(xiàn)移動(dòng)端圖片上傳、壓縮、拖拽排序、拖拽刪除功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
Vue3 組件庫(kù)的環(huán)境配置搭建過(guò)程
這篇文章主要介紹了Vue3 組件庫(kù)的環(huán)境配置搭建過(guò)程,使用 Vite+Ts 開(kāi)發(fā)的是 Vue3 組件庫(kù),所以我們需要安裝 typescript、vue3,同時(shí)項(xiàng)目將采用 Less 進(jìn)行組件庫(kù)樣式的管理，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue-router-link選擇樣式設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
如何解決模塊““vue“”沒(méi)有導(dǎo)出的成員“ref”問(wèn)題
這篇文章主要介紹了如何解決模塊““vue“”沒(méi)有導(dǎo)出的成員“ref”問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
文件拖拽上傳功能現(xiàn)在已經(jīng)隨處可見(jiàn),大家應(yīng)該都用過(guò)了吧,那么它具體是怎么實(shí)現(xiàn)的大家有去了解過(guò)嗎,今天我們一起來(lái)實(shí)現(xiàn)一下這個(gè)功能,并封裝一個(gè)拖拽上傳組件吧2024-03-03
vue + element-ui實(shí)現(xiàn)簡(jiǎn)潔的導(dǎo)入導(dǎo)出功能
Element-UI是餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0 的桌面端UI框架,手機(jī)端有對(duì)應(yīng)框架是 Mint UI，下面這篇文章主要給大家介紹了關(guān)于利用vue + element-ui如何實(shí)現(xiàn)簡(jiǎn)潔的導(dǎo)入導(dǎo)出功能的相關(guān)資料，需要的朋友可以參考下。2017-12-12
Vue.Draggable實(shí)現(xiàn)拖拽效果
這篇文章主要介紹了Vue.Draggable實(shí)現(xiàn)拖拽效果，使用簡(jiǎn)單方便 ，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06