如何点击组件并传递动态数据？
如何点击组件并传递动态数据？
提问于 2019-05-30 07:41:01
我有一个循环组件，它看起来如此：
<light-box @click="passProductId(category.id)" :category-id="categoryId"></light-box>
我的灯箱组件中的代码是：
<template>
<div>
<button type="button" class="btn btn-primary btn-sm btn-block" data-toggle="modal" data-target="#newproductmodal">Add new card</button>
<div class="modal fade" id="newproductmodal" tabindex="-1" role="dialog" aria-labelledby="newproductmodal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
modal form
</div>
</div>
</div>
</div>
</template>
在父组件中，方法是：
passProductId(columnId) {
this.categoryId = columnId;
}
我试过以下：
这.native会在模态中触发双重操作，只要我点击某处，该值就会被设置为最后一个值。
组件灯箱处于循环中，我希望每次都传递动态类别ID。
为什么我不能在这里做@click=""？将此值传递给组件会更好的建议是什么？
回答 1
Stack Overflow用户
发布于 2019-05-30 17:16:59
建议孩子与父母之间的沟通方式是自定义事件，您可以这样做：
//parent component
<light-box @modalClicked="passProductId" :category-id="categoryId"></light-box>
//the method can stay the same
//child
<template>
<div>
<button type="button" @click="$emit('modalClicked',categoryId)" class="btn btn-primary btn-sm btn-block" data-toggle="modal" data-target="#newproductmodal">Add new card</button>
<div class="modal fade" id="newproductmodal" tabindex="-1" role="dialog" aria-labelledby="newproductmodal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
modal form
</div>
</div>
</div>
</div>
</template>
//it's important that you receive the "categoryId" as props in the child and thatis the id that your function will get (implicitly that's why it's not inline).
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100006874
复制相关文章
相似问题
腾讯云开发者
