通过子组件更新父数据?

时间:2016-10-31 19:59:01

标签: javascript vue.js

通过子组件更新父数据的正确程序是什么?

在子组件中 - 我正在通过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']

将数据直接修改为父组件

1 个答案:

答案 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);
    }
}

这种从上到下的单向绑定和事件机制的好处:

  • 您的父组件可以选择在需要时忽略事件 - 从而使子组件可以在其他上下文中重用。
  • 您的子组件(假设您有很多组件)将被允许仅向上发送事件,与直接改变父状态的每个组件相比,这更易于调试。