如何将两个或多个参数发送到组件vue.js？ （vue.js 2）

Question

我的观点是这样的：

<table class="table table-inbox">
    ...
    <tbody>
    @foreach($messages as $message)
    <tr>
        ...
        <td>
            <div class="btn-group" role="group" aria-label="...">
                ...
                <a href="javascript:" @click="modalShow('modal-delete-message','{{ $message->id }}')" class="btn btn-danger">
                    <span class="fa fa-trash"></span> Delete
                </a>
            </div>
        </td>
    </tr>
    @endforeach
    </tbody>
</table>

@section('modal')
    <delete-message-modal id="modal-delete-message" :message-id="idModal"></delete-message-modal>
@endsection

我的组件vue.js（DeleteMessageModal.vue）是这样的：

<template>
    <div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                ...
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        name: 'DeleteMessageModal',
        props:['messageId'],
        methods: {
            deleteMessage(event) {
                var message_id = this.messageId
                console.log(message_id)
                ...
            }
        } 
    }
</script>

当我点击删除按钮时，它会将消息ID的值发送到DeleteMessageModal组件

我这样做：console.log(message_id)，它成功显示消息ID的值

但在这里，我还需要其他参数

除id键外，视图上的messages数组还有seller_id键和buyer_id键

我想将buyer_id密钥和seller_id密钥也发送到组件vue

我该怎么做？

更新

我的解决方案：

我的观点是这样的：

<table class="table table-inbox">
    ...
    <tbody>
    @foreach($messages as $message)
    <tr>
        ...
        <td>
            <div class="btn-group" role="group" aria-label="...">
                ...
                <a href="javascript:" @click="modalShow('modal-delete-message','{{ $message->id }}#separator#{{$message->seller_id}}#separator#{{$message->buyer_id}}')" class="btn btn-danger">
                    <span class="fa fa-trash"></span> Delete
                </a>
            </div>
        </td>
    </tr>
    @endforeach
    </tbody>
</table>

@section('modal')
    <delete-message-modal id="modal-delete-message" :message-data="idModal"></delete-message-modal>
@endsection

我的组件vue.js（DeleteMessageModal.vue）是这样的：

<template>
    <div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                ...
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        name: 'DeleteMessageModal',
        props:['messageData'],
        methods: {
            deleteMessage(event) {
                var messageData = this.messageData           
                var arr = messageData.split('#separator#')
                message_id= arr[0]
                seller_id= arr[1]
                buyer_id= arr[2]
            }
        } 
    }
</script>

Answer 1

如评论中所添加，您可以添加道具：

<script>
    export default{
        name: 'DeleteMessageModal',
        props:['messageId', 'buyerId', `sellerId `],
        methods: {
            deleteMessage(event) {
                var message_id = this.messageId
                console.log(message_id)
                ...
            }
        } 
    }
</script>

并在父模板中传递：

<delete-message-modal id="modal-delete-message" :message-id="idModal" buyer-id="123" seller-id="32"></delete-message-modal>