Vue.js Vue：使用相同的道具和事件处理程序，在同一模板中多次使用同一组件

我有一个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的方法是什么？

一种方法是使用一种方法为道具和事件创建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: /* ... */
    }
}