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

Posted 2023-02-23

【中文标题】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: /* ... */