vue组件之间的相互调用（父子关系与非父子关系）

父子组件的通信请查看这篇博文

此文主要介绍兄弟组件间的通信

所有组件通信方式请查看这篇博文

第一种：eventbus

创建bus.js（bus与main.js平级）

export default(Vue) => {
  const eventBus = new Vue()
  Vue.prototype.$bus = {
    $on (...param) {
      eventBus.$on(...param)
    },
    $off (...param) {
      eventBus.$off(...param)
    },
    $once (...param) {
      eventBus.$once(...param)
    },
    $emit (...param) {
      eventBus.$emit(...param)
    }
  }
}

在main.js引入并调用

import Bus from './bus'
Bus(Vue)

在组件1中发送事件：

tocenter () {
    this.$bus.$emit('接收的函数名functionName', '参数args')
}

在组件2中接收：

created () {
    this.$bus.$on('functionName', (args) => {
      // 要做的事
    })
  }

第二种方法：状态集中管理vuex

在store.js中，保存需要存储的数据及方法

state: {
    storeCart: {id:'',num:''}
  },
// 相当于计算属性
  getters: {
 
  },
  // 相当于methods
  mutations: {
    modify (state, data) {
      let { id, num } = data // 解构里面的id与num值
      Vue.set(state.storeCart, id, num) // 动态修改state中的值
      localStorage.setItem('cart', JSON.stringify(state.storeCart)) // 存入本地
    }
  }
vuex中state中的数据及getter中的方法可以直接在组件中通过属性调用

this.store.state.storeCart

this.store.getters.doneTodosstore

而mutation 这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：传入额外的参数，即 mutation 的 载荷（payload）：

this.store.commit('modify', { id: 10 , num: 2})

原文链接：https://blog.csdn.net/qq_42597536/article/details/89633663