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

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

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

props双向绑定

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

Vuex

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

App.vue 文件

component/dialog/index.vue 文件

component/dialog-icon/index.vue 文件

component/mask/index.vue 文件

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)

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。