vue 組件 props 和event

組件是可擴展的HTML元素，封裝可重用的代碼。

使用祖冊的組件，要確保在初初始化根實例之前注冊組件

注冊的組件中，data必須是函數

父組件通過props向子組件傳遞數據，子組件通過事件events給父組件發送消息。

組件實例的作用域是孤立的

props是單向綁定的：當父組件的屬性變化時，將傳遞給子組件，但是不會反過來。這是為了防止子組件無意修改父組件的狀態；每次父組件更新時，

子組件的所有props都會更新為最新值，這意味着你不應該在子組件內部改變prop，如果你這么做了，Vue會在控制台給出警告

為什么我們會有修改 prop 中數據的沖動呢？通常是這兩種原因：

1. prop 作為初始值傳入后，子組件想把它當作局部數據來用；

2. prop 作為初始值傳入，由子組件處理成其它數據輸出。

對這兩種原因，正確的應對方式是：

1. 定義一個局部變量，並用 prop 的值初始化它：

   props: ['initialCounter'],
   data: function () {
   return { counter: this.initialCounter }
   }

2. 定義一個計算屬性，處理 prop 的值並返回。

props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}

注意在 JavaScript 中對象和數組是引用類型，指向同一個內存空間，如果 prop 是一個對象或數組，在子組件內部改變它會影響父組件的狀態。

非 Prop 屬性

所謂非 prop 屬性，就是它可以直接傳入組件，而不需要定義相應的 prop。

明確給組件定義 prop 是傳參的推薦方式，但組件的作者並不總能預見到組件被使用的場景。所以，組件可以接收任意傳入的屬性，這些屬性都會被添加到組件的根元素上。

例如，第三方組件 bs-date-input，當它要和一個 Bootstrap 插件相互操作時，需要在這個第三方組件的 input 上添加 data-3d-date-picker 屬性，這時可以把屬性直接添加到組件上 (不需要事先定義 prop)：

<bs-date-input data-3d-date-picker="true"></bs-date-input>

添加屬性 data-3d-date-picker="true" 之后，它會被自動添加到 bs-date-input 的根元素上