vue中如何操作其他非父子关系的组件中的事件

在 Vue 中，如果要在一个组件中操作另一个非父子关系的组件中的事件，可以使用事件总线或 Vuex 状态管理。以下是两种方法的介绍：

1. 使用事件总线

事件总线是一个中央事件管理器，可以让不同组件之间进行通信。在 Vue 中，可以使用一个空的 Vue 实例作为事件总线。

首先，在一个单独的 js 文件中创建一个事件总线：

// eventBus.js

import Vue from 'vue'
export const eventBus = new Vue()

然后，在组件 A 中触发一个事件：

// ComponentA.vue

import { eventBus } from './eventBus.js'

export default {
  methods: {
    handleClick() {
      eventBus.$emit('myEvent', data)
    }
  }
}

最后，在组件 B 中监听并处理该事件：

// ComponentB.vue

import { eventBus } from './eventBus.js'

export default {
  mounted() {
    eventBus.$on('myEvent', this.handleMyEvent)
  },
  methods: {
    handleMyEvent(data) {
      // 处理事件
    }
  }
}

2. 使用 Vuex

Vuex 是 Vue 的状态管理器，可以让不同组件之间共享状态。在 Vuex 中，组件可以通过提交 mutation 或触发 action 来修改状态。

首先，在 Vuex 中定义一个 state 和一个 mutation：

// store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    myData: null
  },
  mutations: {
    setMyData(state, data) {
      state.myData = data
    }
  }
})

export default store

然后，在组件 A 中触发一个 mutation：

// ComponentA.vue

import store from './store.js'

export default {
  methods: {
    handleClick() {
      store.commit('setMyData', data)
    }
  }
}

最后，在组件 B 中读取该状态：

// ComponentB.vue

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      myData: state => state.myData
    })
  },
  watch: {
    myData(newVal) {
      // 处理状态变化
    }
  }
}