详解vue跨组件通信的几种方法
在开发组件的时候,一定会遇到组件的通信,比如点击一个图标出现弹窗和蒙层,这三个分别是不同的组件。管理他们之间的状态就成了问题。
创新互联公司2013年开创至今,是专业互联网技术服务公司,拥有项目网站设计、成都网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元宝应做网站,已为上家服务,为宝应各地企业和个人服务,联系电话:18980820575
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 storevuex/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跨组件通信的几种方法
转载来源:http://hbruida.cn/article/jidegh.html