Event Bus 怎么传递插槽？-QT开发中文网

事件总线（Event Bus）的原理是利用 Vue 实例的 $emit 和 $on 方法来实现跨组件通信。因此，如果要通过事件总线传递插槽，可以在父组件中创建一个事件，并将插槽内容作为事件参数传递。然后在子组件中监听该事件，并将接收到的插槽内容渲染到模板中。

具体实现步骤如下：

在父组件中定义一个 eventBus 实例：

// ParentComponent.vue

export default {
  created() {
    this.eventBus = new Vue();
  }
}

在父组件中将插槽内容作为参数触发一个自定义事件：

// ParentComponent.vue

<template>
  <div>
    <slot name="mySlot"></slot>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToChild() {
      const slotContent = this.$slots.mySlot;
      this.eventBus.$emit('my-event', slotContent);
    }
  }
};
</script>

在子组件中监听这个自定义事件，并将接收到的插槽内容渲染到模板中：

// ChildComponent.vue

<template>
  <div>{{ slotContent }}</div>
</template>

<script>
export default {
  created() {
    this.eventBus.$on('my-event', (content) => {
      this.slotContent = content;
    });
  },
  
  data() {
    return {
      slotContent: ''
    };
  }
};
</script>

这样，当父组件中触发 my-event 事件时，子组件就会接收到插槽内容，并将其渲染到模板中。需要注意的是，在使用事件总线传递数据时，要确保所有涉及到的组件都能够正确地访问到 eventBus 实例。