Question

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

<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"
    }
}

主要问题是有一些不常见的 props 并且它们没有在所有组件中使用

最好的方法是什么？

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

Answer 1

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

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

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

1 个答案: