vuejs - 如何将道具和事件动态传递给动态组件
vuejs - how to Passing props and event dynamically to dynamic component
我有一个动态组件,它根据每个组件的类型加载它,我传递的道具在所有组件中使用
<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"
}
}
主要问题是有一些不常见的道具,它们并没有在所有组件中使用
最好的方法是什么?
现在这也是事件的一个问题,因为每个事件组件都有自己独特的
ok 只需将 v-bind
和 v-on
与一个对象一起使用,您可以通过计算 属性
<component :is="myComponent"
v-bind="myComputedConditionalObject"
v-on="myComputedConditionalEventObject"
/>
我有一个动态组件,它根据每个组件的类型加载它,我传递的道具在所有组件中使用
<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"
}
}
主要问题是有一些不常见的道具,它们并没有在所有组件中使用
最好的方法是什么?
现在这也是事件的一个问题,因为每个事件组件都有自己独特的
ok 只需将 v-bind
和 v-on
与一个对象一起使用,您可以通过计算 属性
<component :is="myComponent"
v-bind="myComputedConditionalObject"
v-on="myComputedConditionalEventObject"
/>