Vuejs如何从调用者传递组件数据答案

【问题标题】：Vuejs how to pass component data from callerVuejs如何从调用者传递组件数据
【发布时间】：2017-06-24 07:13:21
【问题描述】：

我的主页呈现来自控制器的数据列表，带有foreach

@foreach ($sales as $sale)
    <button id="{{$sale->id}}" @click="editClicked({{$sale}})">
@endforeach

我有一个像这样放置在页面上的edit 组件，我通过showEditModal 条件以模态方式显示它

<edit v-if="showEditModal" @hide="showEditModal=false"></edit>

简单的组件声明在Edit.vue:

<template name="edit">
    ...
</template>

这只是一个带有输入字段的标准表单，通过 v-model 绑定到 sale。

本质上它是一个更新表单，我打算将主页中的数据加载到要编辑的每个输入字段中。

我的 app.js 只是设置了showEditModal = true，以便在主页顶部显示编辑表单。

基本上我不想在加载模式时通过 GET 方法调用控制器，因为我已经将主页中的数据作为 $sale 对象，所以我只是想知道如何传入 $sale到 Edit.vue 组件？

我认为在 <edit> 组件使用中，它需要绑定 sale 对象，但是我不确定它是如何工作的，因为它来自 foreach 循环。

我知道，app.js 方法中的数据也是通过@click="editClicked({{$sale}})" 传递的，但同样，我不确定如何使用它来传递？

【问题讨论】：

【解决方案1】：

您说得对，您可能希望将当前的sale 项目作为属性传递给编辑模式。我要做的是向您的主 Vue 添加一个名为 selectedSale 的数据属性。

data:{
  selectedSale: null
}

然后在您的editClicked 方法中，设置selectedSale

methods:{
  editClicked(sale){
    this.selectedSale = sale
    ...
  }
}

最后，将其作为属性传递。

<edit :sale="selectedSale" v-if="showEditModal" @hide="showEditModal=false"></edit>

【讨论】：