Question

我有一个父项vue组件，当单击某个项目时，该项目由项目列表组成，一个编辑部件的子组件变为可见，在子项的已安装方法上，将参数设置为可编辑，但是在单击另一个项目时，已安装方法当然，不会再次调用该子项，而保持相同的状态可见，我该如何重置该子项？，该子项的内容是通过道具（父级）发送的

    <div v-for="user in users" :key="user.id" @click=editUser(user)>{{user.name}}
</div>
      <EditUser props="editedUser" edit=true v-if=editingUser

 method: editUser(user){
   this.editingUser=true
   this.editedUser.name=user.name;
 }

和孩子大致：

mounted:function(){
   this.name=editedUser.name;
}
<input type="text" v-model="name"

Answer 1

您描述的功能很简单，如果正确传递了道具，则孩子应该是反应性的并且可以更新而没有任何问题。快速浏览，我看不到是什么导致了您的问题。在这一点上，我能做的最好的就是向您展示一个简单的示例，描述您的工作方式。

编辑：现在，我第二眼看到您正在尝试传递props='something'之类的道具，但不确定是否只是在命名道具“道具”或其中的名称，但是通常您会通过带有kabab-case :my-prop='someObject'的道具，并注意到它在该道具上也使用了'：'速记“ v-bind”。然后，在您的子组件中，您可以执行props: ['myProp']（使用驼峰箱）来接收道具。

我在更新代码时创建了此示例。所以有点不同，但是原理是一样的。注意，我通过单击按钮将item传递到函数中，并且正在更新在“编辑”组件上设置的道具

<button @click="edit(item)">edit</button>
//....
<edit-component v-if='showEdit' :item-data="editData">

https://jsfiddle.net/skribe/m60xof4b/

如何将一组不同的道具传递给孩子

1 个答案: