在其他组件槽内访问和声明 vueJs 组件

Question

我正在尝试在组件槽内声明和访问一个 vue 组件。 模态组件将被创建多次，并且它必须有一个唯一的名称，但我不知道我是如何在插槽内做到这一点的。 使用 Laravel Blade 和 vueJs

<template>
    <table>
        <thead>
            <slot name="head"/>
        </thead>
        <tbody>
        <tr v-for="item in items" :key="item.id">
            <slot name="line" v-bind:item="item" />
        </tr>
        </tbody>
    </table>
</template>

<list-component ref="teamMembers">
    <template v-slot:head>
        <tr>
            <th>Name</th>
            <th>Email-address</th>
            <th>Role</th>
        </tr>
    </template>


    <template v-slot:line="slotProps">
        <td>
            @{{ slotProps.item.name }}
        </td>
        <td>
            @{{ slotProps.item.email }}
        </td>
        <td>
            @{{ slotProps.item.role }}
        </td>

        <td>
            <button @click="$refs.deleteItemModal@{{ slotProps.item.id }}">
                Delete
            </button>
        </td>

        <modal-component ref="deleteItemModal@{{ slotProps.item.id }}">
            
        </modal-component>
    </template>
</list-component>

模态组件如何声明和调用？

如果我这样使用它

<button @click="$refs.deleteItemModal">

和

ref="deleteItemModal"

它可以工作，但总是给我相同的组件。

请告诉我如何创建一个独特的 ref 来创建类似 'deleteItemModal' + slotProps.item.id 的东西

Answer 1

你可以这样试试：

<modal-component :ref="'deleteItemModal' + slotProps.item.id">
</modal-component>

静态值应该用引号覆盖，并且可以使用+将任何动态值与javascript中的字符串连接起来。

要调用该引用组件的openModal 方法，请在modal-component 组件中创建方法

deleteItem(itemId) { this.$refs['deleteItemModal' + itemId].openModal() }

然后更改为按钮点击事件

<button @click="deleteItem(slotProps.item.id)">