Javascript 将对象或对象密钥传递给VueJs中的组件

我有一个Personal表绑定到来自VueJs的对象数组。表上的最后一列是用于编辑每条记录的按钮

我想在单击编辑按钮时显示一个模式弹出窗口，并将文本框绑定到我要编辑的人员的属性。单击模式弹出窗口上的保存按钮时，应更新表格和数据源

但我一直在传递对象，甚至只是传递组件的键，以便加载数据或将编辑过的对象绑定到文本框中

JS

HTML

身份证件
名字
姓
电子邮件
行动
{{personal.id}
{{personal.firstName}
{{personal.lastName}
{{personal.email}
编辑
标题
身份证件
名字
姓
电子邮件
哦，马蹄

您可以尝试：

<button v-on:click="showPersonnelEditor(personnel)">Edit</button>

最后，在html模板中：

<personnel-editor inline-template :personnel=selectedPersonnel><div class="modal fade" >

<personnel-editor inline-template :personnel=selectedPersonnel v-on:personnel-edited="updatePersonnel">

然后在模板中：

<personnel-editor inline-template :personnel=selectedPersonnel><div class="modal fade" >

<personnel-editor inline-template :personnel=selectedPersonnel v-on:personnel-edited="updatePersonnel">

---

谢谢，我能够使用此方法拉拽人员，但如何将其绑定回文本框？有几种方法可以做到这一点，但我更喜欢的方法是在关闭模式（使用按钮或在任何关闭的事件之后）时发出事件，并对根元素上的此事件作出反应。我编辑了这篇文章以提供代码示例。谢谢，但我的意思是，当模态打开时，我的文本框仍然是empy。奇怪。可能是因为您在人事编辑器中使用了prop而不是“人事”数据。我不确定v型模特在道具上的表现。请尝试使用数据，因为您可以添加一个数据属性，并在属性更改时将“personel”的内容复制到该属性中（例如使用watch），或者您也可以直接在Personal editor组件上使用model指令（可能是最干净的解决方案）。看一看文档：我把它显示在模态上的值。但是，我在模态中输入的值不会反映到属性中。也许是因为我使用的是道具而不是数据？

        whenModalClosedMethod() {
            this.$emit('personnel-edited', personnel);
        }

<personnel-editor inline-template :personnel=selectedPersonnel v-on:personnel-edited="updatePersonnel">

updatePersonnel: function(personnel) {
   //look for the correct entry by id in your personnels array and update it
}