Vue 學習筆記 03——組件篇

1.組件基礎

需要注意一下幾點：

a）組件中的 data 是一個函數，便於組件的複用；

b）每個組件必須只有一個根元素；

c）父組件通過 prop 向子組件傳遞數據；

d）子組件通過 $emit 向父組件返回事件及值；

2.prop使用

a）注意大小寫的使用，在 js 中的 prop 若使用的是駝峯命名，在html模板中，則應該改成短橫線分隔命名；

     

b）prop 需要定義類型，如果是布爾值，最好加個默認值；

multiple:{
    type:Boolean,
    default:false
}

c）prop 賦值

     除了可以動態賦值，也可以靜態賦值。當靜態賦值時需要注意以下幾種情況：

     1）當靜態值爲字符串時不需要加 v-bind ；

     2）當靜態值爲數值、布爾、數組、對象的時候，都需要用 v-bind : prop-name 來告訴 Vue，這是一個 JavaScript 表達式而             不是一個字符串。

     3）可以給 prop 傳入一個對象的所有屬性，需要使用不帶參數的 v-bind  (取代 v-bind : prop-name)。

           

3.自定義組件數據綁定（v-model或 update:value-name）

a）第一種通過 v-model：定義組件時使用 model 選項來綁定 value，使用組件時用 v-model 來綁定；

       

b）第二種使用 update:value-name：

      1）定義組件時，在監聽的方法中，使用 $emit 結合update方法來更新返回值，

            

        

       2）使用時，使用  v-bind:value-name.sync="value"  來更新數據        

            

4.監聽數據變化 

     當父組件傳給子組件props中的value值改變時，觸發子組件上的on-change事件