Vue:在同一个模板中多次使用相同的组件,具有相同的道具和事件处理程序
Posted
技术标签:
【中文标题】Vue:在同一个模板中多次使用相同的组件,具有相同的道具和事件处理程序【英文标题】:Vue: same component multiple times in the same template, with same props and event handlers 【发布时间】:2019-11-29 21:52:42 【问题描述】:我有一个 Vue 组件,它通过v-bind
接收一堆道具,并使用v-on
附加了多个事件处理程序。
<SomeComponent
v-for="object in objects"
v-bind:prop1="prop1"
v-bind:prop2="prop2"
v-bind:prop3="prop3"
v-bind:key="object.created_at"
v-on:event-one="eventOne"
v-on:event-two="eventTwo"
v-on:event-three="eventThree"
/>
一切正常。
问题是这个组件可以根据某些条件出现在界面的不同部分。 它是完全相同的组件,具有完全相同的道具和事件处理程序。
我们当前的方法是简单地复制和粘贴上述所有行,但它似乎容易出错且冗长,因为如果明天我们需要添加另一个事件处理程序(比如v-on:event-four="eventFour"
),则需要手动添加它到模板中SomeComponent
的每个实例。任何道具更改等都是如此。
在 React 中,我们可能会将该组件包装在一个函数中,然后根据需要像 renderSomeComponent()
一样调用它。
使用 Vue 的方法是什么?
【问题讨论】:
【参考方案1】:一种方法是使用一种方法为道具和事件创建 javascript 对象。 (除了其中一个绑定依赖于v-for
循环的对象之外,您可以摆脱计算属性。)
<SomeComponent
v-for="object in objects"
v-bind="getProps(object)"
v-on="getHandlers()"
/>
computed:
getHandlers()
return
"event-one": this.eventOne,
"event-two": this.eventTwo,
"event-three": this.eventThree
;
,
methods:
getProps(object)
return
"prop1": this.prop1,
"prop2": this.prop2,
"prop3": this.prop3,
"key": object.created_at
,
eventOne(). /* ... */ ,
eventTwo() /* ... */ ,
eventThree() /* ... */
,
data()
return
prop1: /* ... */,
prop2: /* ... */,
prop3: /* ... */
【讨论】:
以上是关于Vue:在同一个模板中多次使用相同的组件,具有相同的道具和事件处理程序的主要内容,如果未能解决你的问题,请参考以下文章