Vue.js：如何让孙子组件直接向祖先组件发送事件？

vue.js

2024-03-06 04:59:51

如何让 Vue.js 孙子组件直接向祖先组件发送事件

简介

在 Vue.js 2.0 中，让孙子组件向其祖先组件直接发送事件可能会令人困惑。传统上，事件从子组件冒泡到父组件，然后再冒泡到祖先组件。然而，通过使用全局事件总线或 Vuex，我们可以实现孙子组件到祖先组件的直接事件传递。

全局事件总线

全局事件总线是一种在 Vue.js 应用程序中发送和接收事件的机制。它通过创建一个中央实例来工作，该实例充当组件之间通信的桥梁。

要使用事件总线，请执行以下步骤：

在 main.js 中创建一个 Vue 实例：

import Vue from 'vue'

// 创建全局事件总线
const eventBus = new Vue()

// 将事件总线添加到 Vue 原型，以便所有组件都可以访问它
Vue.prototype.$eventBus = eventBus

在孙子组件中，使用 this.$eventBus 向事件总线发送事件：

this.$eventBus.$emit('eventtriggered')

在祖先组件中，使用 this.$eventBus 监听事件总线：

this.$eventBus.$on('eventtriggered', this.performAction)

Vuex

Vuex 是一个 Vue.js 状态管理库，它提供了一个触发事件的系统。要使用 Vuex，请执行以下步骤：

在 store.js 中创建一个 Vuex 存储：

import Vuex from 'vuex'

// 创建 Vuex 存储
const store = new Vuex.Store({
  state: {
    // 存储组件之间的共享数据
  },
  mutations: {
    // 触发事件的 mutation
    eventTriggered(state) {
      // 在祖先组件中执行操作
    }
  }
})

export default store

在孙子组件中，提交触发事件的 mutation：

this.$store.commit('eventTriggered')

在祖先组件中，监听 Vuex 事件：

this.$store.watch(
  state => state.eventTriggered,
  (newValue, oldValue) => {
    if (newValue) {
      // 执行操作
      this.action = 'actionDone'
    }
  }
)