vuejs - 如何将道具和事件动态传递给动态组件答案

【问题标题】：vuejs - how to Passing props and event dynamically to dynamic componentvuejs - 如何将道具和事件动态传递给动态组件
【发布时间】：2021-04-03 09:17:36
【问题描述】：

我有一个动态组件，它根据每个组件的类型加载它，并且我传递的道具在所有组件中使用

<div>
        <component
            :is="getComponentName(attribute.type.toLowerCase())"
            :cell-value="listItem[attribute.name]"
            :attribute="attribute"
            :is-read-only="isReadOnly"
            :row-key-id="listItem.keyId"
        />
</div>

组件从 json 中加载，其中每种类型都分配有一个组件

{
    "dropdown" : {
        "shouldLoadComponent" : "BaseDropDown"
    },
    "assigned" :{
        "shouldLoadComponent" : "BaseDropDown"
    },
    "textbox" : {
        "shouldLoadComponent" : "BaseInput"
    },
    "label": {
        "shouldLoadComponent" : "BaseLabel"
    },
    "switch": {
        "shouldLoadComponent" : "BaseSwitch"
    },
    "time": {
        "shouldLoadComponent" : "BaseLabel"
    },
    "status" : {
        "shouldLoadComponent" : "BaseLabel"
    },
    "comment": {
        "shouldLoadComponent" : "BaseLabel"
    },
    "action": {
        "shouldLoadComponent" : "BaseLabel"
    },
    "personalimage":{
        "shouldLoadComponent" : "BaseLabel"
    }
}

主要的问题是有许多不常见的道具，它们并没有在所有组件中使用

最好的方法是什么？

现在这也是事件的一个问题，因为每个事件组件都有自己独特的

【问题讨论】：

如果我没有理解错，你可以根据attribute.type在你的html模板中做一个switch case，不要使用for循环吗？
@KevinZhang 这个模板html自己是组件和内部循环
这能回答你的问题吗？ Passing props dynamically to dynamic component in VueJS
我看到了这个问题，但没有帮助，因为这个传递道具不是事件

标签： javascript vue.js vue-component repository-pattern factory-pattern

【解决方案1】：

好的，只需将v-bind 和v-on 与一个对象一起使用，您就可以通过计算属性来玩弄对象

<component :is="myComponent"
 v-bind="myComputedConditionalObject"
 v-on="myComputedConditionalEventObject"
/>

【讨论】：