通过子组件更新父数据的正确程序是什么?
在子组件中 - 我正在通过props
直接修改父数据。我不确定这是否是错误的方法。
根据vue doc:
当父属性更新时,它将向下流向孩子,但 不是相反。
子组件示例:
<script>
export default {
props: ['user'],
data: function () {
return {
linkName: '',
linkValue: '',
}
},
methods: {
addLink: function (event) {
event.preventDefault();
this.$http.post('/user/link', {name: this.linkName, key: this.linkValue}).then(response => {
this.user.links.push(response.data);
}, response => {
// Error
}
});
},
}
}
</script>
我使用this.user.links.push(response.data);
通过props: ['user']
答案 0 :(得分:3)
正如您所说的那样,props
并不意味着将数据从子节点传递给父节点。数据绑定只是单向的。
正确的过程是子组件通过$ emit将事件发送到父组件,以及一些值(可选)。
在您的情况下,您可以在子组件的addLink
方法中执行以下操作:
this.$http.post('/user/link', {name: this.linkName, key: this.linkValue}).then(response => {
this.$emit("update-user-links", response.data); // Send an event to parent, with data
}, response => {
// Error
});
您的父母可以按照以下方式收听:
<my-user-link-component :user="userData" v-on:update-user-links="addUserLink"></my-user-link-component>
或简写语法:
<my-user-link-component :user="userData" @update-user-links="addUserLink"></my-user-link-component>
在上面,您将分配方法addUserLink
来处理子组件的事件。在父组件中,您需要按如下方式定义此方法:
methods: {
// ... your other methods,
addUserLink: function(linkData) {
this.userData.links.push(linkData);
}
}
这种从上到下的单向绑定和事件机制的好处: