Vue中VNode数据对象自定义事件处理器失效问题咨询

你遇到的问题核心在于Vue自定义事件不会像原生DOM事件那样自动冒泡，你之前的写法是给父组件的外层div绑定了nextslide事件，但子组件<slide-next>是作为插槽内容存在的，它触发的自定义事件并不会传递到这个div上，所以监听自然不会生效。

正确的实现方式 #

要在Carousel组件内部捕获插槽中子组件的nextslide事件，你需要遍历插槽元素，给每个组件类型的插槽项添加事件监听。修改Carousel.vue的render函数如下：

<script>
export default {
  render(createElement) {
    // 处理默认插槽，给每个子组件绑定nextslide事件
    const processedSlots = this.$slots.default.map(slotNode => {
      // 只处理组件类型的插槽节点，跳过普通DOM元素
      if (slotNode.componentOptions) {
        return createElement(
          slotNode.componentOptions.tag,
          {
            // 保留原有的事件监听，再添加我们需要的nextslide
            on: {
              ...slotNode.data?.on,
              nextslide: this.triggerFunction
            }
          },
          slotNode.children
        )
      }
      // 非组件节点直接返回
      return slotNode
    })

    return createElement('div', processedSlots)
  },
  methods: {
    triggerFunction() {
      console.log('this should trigger');
    },
  }
}
</script>

为什么之前的写法不行？ #

再给你理清楚逻辑：

• 你给父组件的div绑定nextslide监听，只有当这个div本身被触发$emit('nextslide')时才会响应
• 插槽里的<slide-next>是独立的子组件，它的自定义事件是直接向自己的父组件（也就是使用<slide-next>的组件）触发的，而不是向Carousel的外层div触发
• Vue自定义事件没有冒泡机制，除非你手动在组件中转发事件

修改后，当你点击<slide-next>的按钮时，控制台会先后打印trigger emit和this should trigger，事件监听就生效了。

内容的提问来源于stack exchange，提问作者twoam