如何向组件 vue.js 发送两个或多个参数？ (vue.js 2)

Posted 2023-02-22

【中文标题】如何向组件 vue.js 发送两个或多个参数？ (vue.js 2)

【英文标题】：How to send two or more parameters to component vue.js? (vue.js 2)

【发布时间】：2017-08-03 01:07:41

【问题描述】：

我的看法是这样的：

<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的值

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

视图上的messages数组，除了id key，还有seller_id key和buyer_id key

我想将buyer_id key和seller_id key也发送到组件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>

【问题讨论】：

为什么不将它们添加到组件的 props 中，并与 messageId 一样在父视图中传递？

@Goliadkin，我知道。但是，我的问题是：如何从 $messages 数组中获取价值？所以，当点击删除按钮时，我得到了buyer_id和seller_id的值

【参考方案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>

【讨论】：

我知道。但是，我的问题是：如何从 $messages 数组中获取价值？所以，当点击删除按钮时，我得到了buyer_id和seller_id的值

@mosestoh 一个选项可以是传递它以及一个道具，或者您可以开始考虑使用一些集中式状态机或 vuex，您可以查看我的类似答案here .

@mosestoh 将您想要的值传递给modalShow 函数，在其中设置一些将绑定到DeleteMessageModal 道具的变量 .... 并完成这个。

@Jonatas Walker，我仍然很困惑。你最好给出更详细的答案

@Saurabh，我还是很困惑。我的问题的实际核心是如何从 $messages 数组中获得一些价值