Laravel Blade+Vue环境下如何为插槽内循环组件生成唯一ref并访问？

1. 修正ref绑定方式 #

将模态框的固定ref改为动态绑定，用字符串拼接前缀和行id：

<!-- 把原来的ref="deleteItemModal@{{ slotProps.item.id }}"替换为下面的写法 -->
<modal-component :ref="'deleteItemModal' + slotProps.item.id">
    <!-- 模态框内容 -->
</modal-component>

说明：

• :ref是v-bind:ref的缩写，告知Vue该属性值是需要计算的JS表达式，而非固定字符串
• 属性内的表达式不需要加@{{}}，该语法仅用于文本节点中区分Blade插值和Vue插值，动态属性内的内容默认不会被Blade解析

2. 修正按钮点击事件 #

使用方括号语法访问动态命名的ref实例，调用模态框显示方法：

<!-- 把原来的@click="$refs.deleteItemModal@{{ slotProps.item.id }}"替换为下面的写法 -->
<button @click="$refs['deleteItemModal' + slotProps.item.id].show()">
    Delete
</button>

说明：

• 方括号支持传入动态字符串作为对象的key，从而拿到对应id的模态框实例
• 把.show()替换为你自己模态框组件实际的显示方法名即可

可选优化方案（更推荐） #

不需要为每一行都渲染一个模态框实例，仅需共用一个全局模态框：

• 在Vue实例/父组件中声明一个变量currentDeleteId = null
• 点击删除按钮时执行currentDeleteId = slotProps.item.id，同时调用模态框显示
• 模态框内部的删除逻辑直接使用currentDeleteId即可
  该方案减少了大量重复组件渲染，性能更好

内容的提问来源于stack exchange，提问作者Wiebe