如何将不同的道具集传递给 vue child答案

【问题标题】：how to pass different set of props to a vue child如何将不同的道具集传递给 vue child
【发布时间】：2019-02-20 02:00:49
【问题描述】：

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

【问题讨论】：

请显示一些代码，以便我们更好地理解和回答。同样，当您说“..单击其他项目时...”时，您是说要单击父项中的其他项目并使用该项目道具更新子项，对吗？
是的，基本上是一个非常简单的杂物
你可能没有——或者，错误地——在 EditUser 组件中声明了 props。在这种情况下，没有反应，子组件不会响应父组件的更新。如果这不是问题，您可能不会在更新 editedUser 道具时设置 name。 mounted 不会在道具更新时被调用；所以，你需要为此定义一个观察者。无论哪种方式：请发布可执行代码。
我每天都在使用 Vue.js，并且完全按照您的描述进行操作，完全没有任何问题。由于您只是粗略地显示您的代码，因此无法查看您的问题所在。但是在上面的例子中，你肯定没有正确传递你的道具。 props="editUser" 行如果它做任何事情，只是传递实际的字符串“editUser”当然不是对象。
P.S.请在此处阅读文档示例vuejs.org/v2/api/#props 和此处vuejs.org/v2/guide/… 特别注意在`v-bind:title="post.title"` 中使用ov v-bind 不用说v-bind 的简写是只是冒号本身。

标签： vue.js

【解决方案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/

【讨论】：

hmm 第二次看你没有使用道具传递数据，因为它是一个大组件，所以没有必要，但在我的情况下，编辑模式有点复杂，我会喜欢在添加组件上重新使用它或编辑自己的组件，我会尝试在某处添加我的代码以供检查
不，实际上有单独的组件，我正在使用道具传递数据。您是否认为这是因为它们不在单独的文件中？事实上，您可以在单个文件中使用Vue.component 定义任意数量的组件。 再次查看脚本部分。 ....
定义子组件的部分是..Vue.component('edit-component', .... props:['itemData'],...，它接收的道具是itemData，它的模板绑定到id为'child'的元素。父组件是默认应用程序本身，但也可以很容易地单独定义。这里为了争论，将上面的相同 jsfiddle 重新改写为使用主应用程序实例，其中包含两个组件。父母和孩子。 jsfiddle.net/skribe/w6v3cxrk
是的，使用您的代码我发现了我的错误，在设置我想要编辑的项目之前，我创建了一个副本以防止 2 向绑定，因为如果父级更新为没有明确的保存操作，但现在我必须先将我的对象重置为 {}，然后它才能工作