javascript - Vue3 - 动态向元素/组件添加 @click、@blur 等事件监听器

Question

我目前正在为 vue 构建一个“表单套件”，因此我可以将单个 FormComponent 用于多个不同的表单，并使用 configObject 配置整个表单。这个 configObject 可能看起来像这样:

configObj = {
    name: 'SampleForm',
    classes: ['sample-form', 'and', 'more', 'classes']
    groups: [
        {
            name: 'email-address',
            classes: ['sample-class'],
            input: {
                type: 'text',
            },
            label: {
                value: 'E-Mail'
            },
            additionalHtml: [
                {
                    tag: 'button',                   //this should render a button: <button></button>
                    classes: ['additional', 'classes'],
                    value: 'OK',                      //the button text
                    events: {
                        click() { //the logic to execute on click }
                    }
                }
            ]
    ]

基于该 configObjet，我希望 vue 渲染各个表单，在这种情况下:

<form id="SampleForm" class="sample-form and more classes">
    <div class="form-group email-address sample-class">
        <label>E-Mail:</label>
        <input type="text" />
        <button class="additional classes">Ok</button>
    </div>
</form>

FormComponent 导入每个 formGroup 的组件，即 FormGroupText、FormGroupSelect，... FormGroupText 组件的模板如下所示:

<template>
    <div class="form-group">
        <label>{{ config.label.value }}</label>
        <input :type="config.input.type" />
        <component v-for="element in config.additionalHtml" :key="element.tag" :is="element.tag"></component>

现在这里缺少的是事件!这就是问题 - 我可以在这里动态添加事件监听器吗？

我可以添加

@click="element['click']

但是我不得不在这里添加所有可能的事件。我只想要 configObject 中指定的事件。我真的不确定这是否可能。

有人知道我如何实现这一目标吗？或者类似的东西，我只是不想对我需要的每个表单进行编码 - 我想要一个可用于构建表单的可重复使用的工具包。

提前致谢:)

Answer 1

尝试将 $listeners 与 v-on="eventsObject" 绑定(bind)

在您的情况下，看起来像这样:

<component
  v-for="element in config.additionalHtml"
  :key="element.tag"
  :is="element.tag"
  v-on="element.events"  // add this line
></component>

PS 我建议将 :key="element.tag" 更改为其他内容。 您可以在循环中包含更多相同的标签，这将导致重复键的错误。无论如何祝你好运😉