通過子組件更新父數據？

Question

通過子組件更新父數據的正確程序是什么？

在子組件中-我直接通過props修改父數據。 我不確定這是否是錯誤的解決方法。

根據vue文檔：

當父級屬性更新時，它將流向子級， 但 不會反過來。

子組件示例：

<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']直接將數據修改到父組件props: ['user']

Answer 1

就像您正確說的那樣， 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);
    }
}

這種從上到下的單向綁定和事件機制的好處：

• 如果需要，您的父組件可以選擇忽略事件-從而使子組件可以在其他上下文中重用。
• 您的子組件（假設您有許多組件）將只能向上發送事件，與直接改變父狀態的每個子​​組件相比，調試起來更容易。