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:在同一个模板中多次使用相同的组件,具有相同的道具和事件处理程序的主要内容,如果未能解决你的问题,请参考以下文章

具有不同背景颜色的相同组件

具有不同背景颜色的相同组件

在 nedb 中添加的记录是单一的,但为啥 VUE 会多次存储相同的记录?

跨页面重用相同组件(具有相同道具)的最佳方法

(Vue.js)具有不同路由的相同组件

Vue.js