在其他组件插槽中访问和声明 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"

它有效，但总是给我相同的组件。

请告诉我如何创建一个唯一的引用来创建这样的东西 'deleteItemModal' + slotProps.item.id

Answer 1

你可以这样试试：

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

静态值应该用引号覆盖，并且可以使用 + 将任何动态值与 javascript.

中的字符串连接起来

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

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

然后更改为按钮点击事件

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

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

Access and declare vueJs component inside other component slot

vue.js

laravel-blade

vue-component

vuejs2