Vue3 - 向元素/组件动态添加事件监听器，如@click、@blur答案

【问题标题】：Vue3 - add event listeners like @click, @blur to elements / components dynamicallyVue3 - 向元素/组件动态添加事件监听器，如@click、@blur
【发布时间】：2021-06-24 21:17:46
【问题描述】：

我目前正在为 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 中指定的事件。我真的不确定这是否可能。

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

提前致谢:)

【问题讨论】：

标签： javascript forms vue.js

【解决方案1】：

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

在你的情况下，看起来像这样：

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

附言我建议将:key="element.tag" 更改为其他内容。您可以在一个循环中拥有更多相同的标签，然后这将导致重复键的错误。无论如何祝你好运?

【讨论】：