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

问题描述

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

<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 并且它们没有在所有组件中使用

最好的方法是什么？

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

解决方法

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

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