代码之家 › 专栏 › 技术社区 › sandre89

Vue:在同一模板中多次使用同一组件,使用相同的道具和事件处理程序

vue.js

1

sandre89 · 技术社区 · 6 年前

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

0 回复 | 直到 6 年前

1

Stephen Thomas 6 年前

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