Vue JS 3 与 Vaadin 事件集成

Question

我正在将 VueJS 3 与 Vaadin 集成（因为我想避免 Lit），但我遇到了两个方面的问题： 首先：vaadin 似乎检查了 vue 文件语法并且不喜欢它，所以我不知道如何绕过它。 其次：我无法从 Vue 发出或分派事件并使用 @DomEvent 注释从 Vaadin 捕获它们（我是在尝试使用 VueJS 2 时这么说的）。有什么办法吗？.

例如：

@DomEvent("custom-name")
public class ClickEvent extends ComponentEvent<CustomView> {
    public ClickEvent(CustomView source,
                      boolean fromClient,
                      @EventData("event.name") String eventName,
                      @EventData("name") String name
                      ) {
        super(source, fromClient);
    }

}

VueJS 组件看起来像：

<script>
    export default {
        name: "custom-view",
        template: "<button @click='fireEvent'> Fire Event</button>",
        methods: {
            fireEvent: function(){
    
                    var evt = new Event("custom-name");
                    evt.name = "Agustin";
                    this.$emit(evt);
    
            }
        }
    }
</script>

Answer 1

我不知道有关调度事件的 Vue 语法，但至少你应该使用

CustomEvent

而不是

Event

。如果您的元素具有影子根，您可能需要将

composed

和

bubbles

属性设置为 true。此外，您应该使用

detail

对象来存储任何自定义负载。在纯 JavaScript 中，它看起来像这样：

   const event = new CustomEvent('custom-name', {
     detail: { name: 'your custom name' }, bubbles: true, composed: true
   });
   this.dispatchEvent(event); // 'this' is a reference to the element root