vue3调用父组件方法bus.emit

在 Vue 3 中，可以使用事件总线机制来调用父组件的方法。以下是一种实现方式：

首先，在父组件中创建一个事件总线对象，可以使用 Vue 自带的 `app.config.globalProperties` 来定义全局属性：

// 父组件
import { createApp } from 'vue';

const app = createApp({...});

// 创建事件总线对象
app.config.globalProperties.bus = app;

// ...

app.mount('#app');

然后，在子组件中可以通过访问 `$parent` 来获取父组件实例，并调用其方法：

// 子组件
export default {
  // ...
  methods: {
    emitEvent() {
      this.$parent.bus.emit('eventName', data);
    }
  },
  // ...
}

这样子组件就可以通过调用 `this.$parent.bus.emit` 来触发父组件的 `eventName` 方法，并传递相应的数据。

请注意，这种方法可能存在一些限制和潜在的问题，推荐在更大型的应用程序中使用 Vuex 或其他状态管理库来管理组件间的通信。

相关问题

vue bus.$emit

在Vue中，可以使用事件总线来实现组件之间的通信。其中，$emit()方法用于触发一个事件，可以在事件总线上监听该事件的所有组件中接收到该事件并执行相应的操作。

下面是一个示例代码，演示了如何使用事件总线和$emit()方法：

// main.js
import Vue from 'vue'

// 创建事件总线
const bus = new Vue()

// 把bus挂载到Vue的原型上，保证所有的组件都能通过this.$bus访问到事件总线
Vue.prototype.$bus = bus

// ComponentA.vue
export default {
  methods: {
    handleClick() {
      // 触发事件
      this.$bus.$emit('event-name', 'hello world')
    }
  }
}

// ComponentB.vue
export default {
  created() {
    // 监听事件
    this.$bus.$on('event-name', (data) => {
      console.log(data) // 输出：hello world
    })
  }
}

在上面的示例中，当ComponentA.vue组件中的handleClick()方法被调用时，会触发一个名为'event-name'的事件，并传递一个字符串参数'hello world'。而在ComponentB.vue组件中，通过监听'event-name'事件，可以接收到该事件并执行相应的操作，这里是将传递的字符串参数打印到控制台上。

vue3 父组件 调用子组件的方法

在 Vue.js 中，当您想要从父组件调用子组件的方法时，可以通过下面几种方式实现：

### 方式一：直接访问 `$children` 和 `$refs`

#### 示例代码：

假设您有一个名为 `ChildComponent.vue` 的子组件，其中定义了一个方法 `myMethod`。

<!-- ChildComponent.vue -->
<template>
  <div>
    <!-- ...其他模板内容... -->
    <button @click="myMethod">触发子组件方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    myMethod() {
      console.log('子组件方法被调用了');
    }
  }
}
</script>

父组件（`App.vue`）可以直接访问 `$children` 或 `$refs` 来调用该方法。

**通过 `$children` 访问：**

<!-- App.vue -->
<template>
  <div>
    <child-component @my-method="handleMyMethod" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleMyMethod() {
      console.log('父组件调用了子组件的方法');
    }
  }
};
</script>

**通过 `$refs` 访问：**

<!-- App.vue -->
<template>
  <div>
    <child-component ref="childComponent" />
    <button @click="callMyMethodFromParent">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    callMyMethodFromParent() {
      const childComponent = this.$refs.childComponent;
      if (childComponent && childComponent.myMethod) {
        childComponent.myMethod();
      } else {
        console.error('找不到子组件或方法');
      }
    }
  }
};
</script>

### 方式二：使用事件总线

如果您不想使用 `$refs` 并希望让应用程序更加模块化和解耦，可以创建一个全局事件总线（Event Bus），用于在不同组件间传递消息。

#### 示例代码：

// event-bus.js
const EventBus = new Vue();

export default EventBus;

**在父组件中订阅事件并触发子组件方法：**

<!-- App.vue -->
<template>
  <div>
    <child-component :event-bus="$root.eventBus" />
    <button @click="emitMyMethodFromParent">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
import { eventBus } from '../event-bus.js'; // 引入事件总线

export default {
  components: {
    ChildComponent,
  },
  methods: {
    emitMyMethodFromParent() {
      eventBus.$emit('my-event', '触发子组件方法');
    },
    onMyMethod(eventData) {
      console.log('父组件接收到子组件的消息:', eventData);
    }
  }
};
</script>

**在子组件中监听事件并响应：**

<!-- ChildComponent.vue -->
<template>
  <div>
    <!-- ...其他模板内容... -->
    <button @click="emitMyMethod">触发子组件方法</button>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$root.eventBus.$on('my-event', this.onMyMethod); // 监听事件
  },
  beforeDestroy() {
    this.$root.eventBus.$off('my-event', this.onMyMethod); // 清理监听器
  },
  methods: {
    onMyMethod(eventData) {
      console.log('子组件接收到父组件的消息:', eventData);
    }
  }
}
</script>

### 注意事项：

- 当使用 `$refs` 时，确保子组件的方法名和属性名与父组件期望一致，以便能够正确调用。
- 如果方法有返回值，记得在父组件中接收这些返回值。
- 对于更复杂的逻辑或状态管理，考虑使用 Vuex 等状态管理库来提高应用的可维护性。