Vue.js 如何在兄弟组件上触发事件

在本文中，我们将介绍如何在Vue.js中触发一个兄弟组件上的事件。通常情况下，兄弟组件之间的通信是通过父组件来实现的，然而有时候我们可能需要直接在兄弟组件之间传递数据或触发一个事件。Vue.js提供了多种方法来实现这一目标，我们将分别介绍这些方法。

阅读更多：Vue.js 教程

使用事件总线

Vue.js中的事件总线是一种简单而强大的在组件之间通信的方式。它是一个全局的Vue实例，在任何组件中都可以通过它来发布和订阅事件。我们可以利用事件总线来实现在兄弟组件之间触发事件的功能。

首先，在根组件上创建一个事件总线实例。

// main.js
import Vue from 'vue'
const bus = new Vue()

new Vue({
  el: '#app',
  render: h => h(App, { props: { bus } }),
})

然后，在第一个组件中，我们可以通过事件总线实例触发一个自定义事件。

// ComponentA.vue
export default {
  methods: {
    onClick() {
      this.props.bus.emit('event', data)
    }
  }
}

接着，在第二个组件中，我们可以通过事件总线实例监听这个自定义事件。

// ComponentB.vue
export default {
  created() {
    this.props.bus.on('event', this.handleEvent)
  },
  methods: {
    handleEvent(data) {
      // 响应事件的逻辑
    }
  }
}

通过以上代码，我们成功在兄弟组件之间触发了一个自定义事件，并在目标组件中响应了该事件。

使用Vuex

Vuex是Vue.js的一个官方状态管理库，它提供了一种集中式的状态管理模式，能够解决组件之间的数据共享和通信问题。通过在Vuex中定义一个全局状态，我们可以在任何组件中访问和修改这个状态，从而实现在兄弟组件之间触发事件的功能。

首先，我们需要安装和配置Vuex。

$ npm install vuex

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    // 全局状态
  },
  mutations: {
    // 修改全局状态的方法
  },
  actions: {
    // 异步修改全局状态的方法
  },
  getters: {
    // 计算属性
  }
})

export default store

然后，在根组件中注册Vuex的store。

// main.js
import Vue from 'vue'
import store from './store'

new Vue({
  el: '#app',
  store,
  render: h => h(App),
})

接着，在组件A中触发一个自定义事件。

// ComponentA.vue
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['action']),
    onClick() {
      this.action(data)
    }
  }
}

在组件B中监听这个自定义事件。

// ComponentB.vue
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['data']),
  },
  created() {
    this.$store.dispatch('action', this.handleEvent)
  },
  methods: {
    handleEvent(data) {
      // 响应事件的逻辑
    }
  }
}

通过以上代码，我们成功在兄弟组件之间触发了一个自定义事件，并在目标组件中响应了该事件。

使用自定义事件

除了以上两种方法，Vue.js还提供了通过自定义事件来实现在兄弟组件之间触发事件的功能。在Vue组件实例中，我们可以通过$on方法来监听一个自定义事件，通过$emit方法来触发一个自定义事件。

在第一个组件中，我们可以通过$emit方法触发一个自定义事件。

// ComponentA.vue
export default {
  methods: {
    onClick() {
      this.$emit('event', data)
    }
  }
}

在第二个组件中，我们可以通过$on方法监听这个自定义事件。

// ComponentB.vue
export default {
  mounted() {
    this.parent.on('event', this.handleEvent)
  },
  methods: {
    handleEvent(data) {
      // 响应事件的逻辑
    }
  }
}