如何将数据从父刀片传递到包含的模式？

Posted 2023-02-22

【中文标题】如何将数据从父刀片传递到包含的模式？

【英文标题】：How to pass data from a parent blade to a included modal?

【发布时间】：2020-04-02 18:46:08

【问题描述】：

我试图在单击按钮时调用模态并传递一个$incident 数组，然后该数组将传递给一个 Vue 组件的属性。您我尝试使用数据附加，但我认为这是错误的。

我目前有一个表循环通过一个事件数组传递到我的刀片：

@foreach($incidents as $incident)
    <tr>
        <td> $incident->service_now_incident_number </td>
        <td> $incident->business_service_reference ?: 'N/A' </td>
        <td> $incident->status </td>
        <td> $incident->raised_date->format('d/m/y') </td>
        <td> $incident->email </td>
        <td>
            <a class="btn btn-primary" data-toggle="modal" data-target="#incident-details-modal" data-attach="$incident">View</a>
        </td>
    </tr>
@endforeach

这是我试图将数据传递给的模式：

<div class="modal fade" id="incident-details-modal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <incident-details :incident="$incident"></incident-details>
        </div>
    </div>
</div>

有没有办法在模态负载上传递数组数据？

【问题讨论】：

你在这里混合概念。为什么你同时使用 VueJS 和刀片？一些前端框架的重点是确保前端和后端是“独立的”和分离的。可以使用 REST 进行通信。

很好的答案，朋友欢呼。

【参考方案1】：

您可以为此目的使用 $emit 方法。 v-on 指令捕获 $emit 发出的子组件事件

子组件触发点击事件：

export default 
  methods: 
    onClickButton (event) 
      this.$emit('clicked', 'someValue')
    
  

父组件接收点击事件：

<div>
  <child @clicked="onClickChild"></child>
</div>

export default 
  methods: 
    onClickChild (value) 
      console.log(value) // someValue