通過子組件更新父數據？

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

在子組件 - 我直接通過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']

來源

2016-10-31 I' ll-Be-Back

正如你正確地指出直接修改數據至母體組成部分，props並不意味着將數據從孩子傳遞給父母。數據綁定是單向的。

正確的做法是子組件通過$發送事件發射到母部件，具有一定的值（可選）一起。

在你的情況，你可以這樣做在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); 
    } 
} 
```
優勢事件（如果需要的話） - 從而使子組件在其他環境中可重用。
你的子組件（假設你有很多）將被允許向上發送只有事件，與每個組件直接變異的父狀態相比，它們更容易調試。

來源

2016-11-01 02:45:28 Mani

非常感謝您的回答。我沒有看到代碼中定義的'update-user-links'方法？ –

'update-user-links'是子組件通過'$ emit'傳遞迴父組件的事件代碼。父組件使用'v-on：'偵聽事件代碼。實際的父方法不需要具有相同的名稱。在這種情況下，事件代碼'update-user-links'映射到父節點的方法'addUserLink'。 – Mani

啊，我明白了，現在我明白了。謝謝：） –

通過子組件更新父數據？

回答

相關問題