Vue 模式是props向下，events向上。聽起來很簡單，但在編寫自訂元件時很容易忘記。

從 Vue 2.2.0 開始，您可以使用v -model（帶有計算屬性）。我發現這種組合在組件之間創建了一個簡單、乾淨且一致的介面：

• 傳遞給元件的任何props都會保持回應狀態（即，它不會被克隆，也不需要watch函數在偵測到變更時更新本機副本）。
• 變更會自動傳送給父級。
• 可與多個層級的元件一起使用。

計算屬性允許單獨定義 setter 和 getter。這允許Task元件重寫如下：

Vue.component('Task', { template: '#task-template', props: ['list'], model: { prop: 'list', event: 'listchange' }, computed: { listLocal: { get: function() { return this.list }, set: function(value) { this.$emit('listchange', value) } } } })

model屬性定義關聯的prop與v-model，以及變更時將發出哪個事件。然後，您可以從父元件呼叫此元件，如下所示：

listLocal計算屬性在元件內提供了一個簡單的 getter 和 setter 介面（將其視為私有變數）。在#task-template中，您可以渲染listLocal並且它將保持反應性（即，如果parentList更改，它將更新Task 元件）。您也可以透過呼叫 setter（例如this.listLocal = newList）來變更listLocal，它會將變更傳送給父級。

此模式的優點在於，您可以將listLocal傳遞給Task的子元件（使用v-model），並進行變更來自子元件的內容將傳播到頂級組件。

例如，假設我們有一個單獨的EditTask元件，用於對任務資料進行某種類型的修改。透過使用相同的v-model和計算屬性模式，我們可以將listLocal傳遞給元件（使用v-model）：

如果EditTask發出更改，它將適當地呼叫listLocal上的set()，從而將事件傳播到頂層。同樣，EditTask元件也可以使用v-model呼叫其他子元件（例如表單元素）。

這與以下事實有關：在本地改變 prop 是被認為是 Vue 2 中的反模式

如果您想要在本機上改變prop，您現在應該做的是在data中宣告一個使用props 的欄位code> value 作為其初始值，然後變更副本：

Vue.component('task', { template: '#task-template', props: ['list'], data: function () { return { mutableList: JSON.parse(this.list); } } });

您可以在Vue 上閱讀更多相關資訊.js官方指南

---

註1：請注意您不應該不為prop和data使用相同的名称>，即：

data: function () { return { list: JSON.parse(this.list) } } // WRONG!!

註2：自我覺得關於props和reactivity存在一些混亂，我建議您看看此線程