Vue.js 如何将不同的道具传递给vue儿童

我有一个由项目列表组成的父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;
 }

{{user.name}
您描述的功能很简单，如果您正确地传递道具，那么孩子应该是被动的，并且更新时不会出现任何问题。快速看一眼，我看不出是什么导致了你的问题。在这一点上，我所能做的就是给你展示一个简单的例子，比如你描述的工作

编辑：现在我再看一眼，发现你正试图传递你的道具，比如
props='something'
我不确定你是将道具命名为“props”还是什么，但通常你传递的道具带有卡巴布盒
：my prop='someObject'
，注意它使用的是“：”缩写“v-bind”也在那个道具上。然后在您的子组件中，通过执行
props:['myProp']
（使用camelcase）接收道具。

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

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

编辑
//....

请出示一些代码，以便我们更好地理解和回答。当你说“.当点击一个不同的项目…”时，你是说你想点击父项中的一个不同的项目并用该项目的道具更新子项，对吗？是的，基本上是一个非常简单的问题你可能没有，或者，在你的
EditUser
组件中错误地声明了道具。在这种情况下，没有反应，子组件不会响应父组件上的更新。如果这不是问题所在，您可能不会在更新
editedUser
道具时设置
name
<代码>挂载

不会在道具更新时调用；因此，您需要为此定义一个观察者。无论哪种方式：请发布可执行代码。我每天都使用Vue.js，完全按照您所描述的做，没有任何问题。因为您只是粗略地显示代码，所以不可能看到问题所在。但在上面的示例中，您肯定没有正确地传递道具。行

props=“editUser”

如果执行任何操作，则只传递实际字符串“editUser”，当然不是对象。请阅读此处的文档示例，并特别注意在`v-bind:title=“post.title”中使用ov

v-bind

`不用说，

v-bind

的缩写就是冒号本身。嗯，再看一眼，你不是在用道具传递数据，因为它都是一个大组件，所以没有必要这样做，但在我的情况下，编辑模式有点复杂，我想在添加组件或编辑中重复使用它我自己的组件，以及我会尝试添加我的代码某处进行检查没有事实上，有单独的组件，我通过道具传递数据。您这样想是因为它们不在单独的文件中吗？实际上，您可以在单个文件中使用

Vue.component

定义任意数量的组件。请再次查看脚本部分。。。。定义子组件的零件是<代码>Vue.component（'edit-component'，..道具：['itemData']，…它接收的道具是

itemData

它的模板绑定到id为'child'的元素上。父组件是默认的应用程序本身，但它也可以很容易地单独定义。为了参数起见，这里将上面的相同JSFIDLE重新格式化为使用带有两个comp的主应用程序实例是的，使用你的代码我发现了我的错误，在设置我想要编辑的项之前，我创建了它的副本以防止双向绑定，因为如果父项也在没有显式保存操作的情况下更新，我会感到困惑，但现在我必须先将我的对象重置为{}，然后它才能工作

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