Vue 3，具有绑定事件和函数的动态组件

Question

我有一个如下所示的表单字段数组，我想使用事件和函数渲染动态表单

[...{
            label: "Logo",
            field: "image",
            component: SingleImg,
            event:"select",
            handleEvent:(event) => {
                console.log("hello")
            },
            attributes: {
              upload:false,
              type: "file",
              accept: "image/*",
              maxFileSize: 10000000,
              showUploadButton: false,
              showCancelButton: false,
              
            },
          },]

这是我的渲染方式：

<component
              :is="row.component"
              v-bind="row.attributes"
              v-model="formData[row.field]"
              :key="row.field"
              @[row.event]="row.handleEvent"
            ></component>

有人知道如何正确渲染事件和功能吗？

告诉我如何在 Vue 模板中正确渲染事件和功能

Answer 1

更改您的配置，如下例所示：

 on: {
            keyDown: (event) => {
            console.log("hello")
        }
    },

并在组件中使用v-on：

 <component
          :is="row.component"
          v-bind="row.attributes"
          v-model="formData[row.field]"
          :key="row.field"
          v-on="row.on"
        ></component>