我有一些可重用组件，每当我添加一个时，它就会被推入一个数组等中。问题是：如何确保这些可重用组件中的方法仅针对相应组件运行，而不是针对所有组件运行。
示例：使用@click 事件打开模态，模态显示我添加组件的确切次数（预期，但我想更改它，因此它只显示一次，并且只针对相应的组件）。
添加组件：
<template v-for="(comp, index) in comps">
<component
:is="comp"
:key="index"
:currentIndex="currentIndex"
v-on:delete="deleteComp($event)"
></component>
</template>
某些组件中的相同方法：
methods: {
showModal() {
this.$bvModal.show('modalSmall');
}
}
最好的方法是传递一个 id 作为不同组件的道具。
<template v-for="(comp, index) in comps">
<component
....
:id="comps.id" // you could create a computed property to generate an id based on a number or some other unique identifier
....
></component>
</template>然后在你的组件中，
props: {
id: {
type: string,
required: true
}
}
methods: {
showModal() {
this.$bvModal.show(id);
}
}请记住在模板中为每个模态更改您的 id，从modalSmallto id（id 道具）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句