元件
元件化的意義：封裝（複用，把邏輯隱藏起來，提高可維護性），快速開發（搭積木）
約定：我們通常把那些除了HTML標籤以外的自定義元件，才稱為‘元件’，結論是，我們說“父元件”“子元件”指的是
- 本質：就是HTML的擴充套件。結論：我們在使用元件時，要把它當成HTML一樣的感覺來使用
- 定義一個元件
- 語法：Vue.component("元件名"，"選項")
- 第一個引數，‘元件名’：必須是兩個以上的”單詞“，並且要用中劃線（-）連線
- 第二個引數，選項：除了el不能用，其他選項都可以使用，比如data，methods，生命週期，watch，computed
- template選項：對元件來講，有一個必須的選項是template，這個選項用於指定當前檢視的模板（HTML字串），在檢視模板中可以使用我們學過的所有指令
- template檢視結構必須是”單一節點“
- data選項：元件可以有自己獨立的data選項，但是data不再是一個{}，必須是一個工廠函式
- props選項：props表示由父元件作用域傳遞過來的‘自定義屬性’，接收之後可以通過this訪問。所以props資料可以在當前元件中的指令，其他選項中使用，
- props:父元件向子元件傳遞資料，子元件使用props接收，可以傳遞基本資料型別，引用資料型別
- $emit('自定義事件名稱'，'...將要回傳給父元件的資料列表')：用於觸發一個自定義事件，同時向父元件傳遞資料
結論：元件化的核心就是"自定義屬性props","自定義事件$emit()"+"自定義插槽
- 1.props是子元件的一個選項，用於接收父元件給我的自定義屬性 =>v-bind,簡寫為:
- 2.$emit(),是一個vue api，用於觸發父元件給我的自定義事件（向父元件傳送資料）=>v-on 簡寫為@
- 3.slot,是vue的一個內建元件，可以直接使用，稱為”插槽“=>v-slot 簡寫為#
父子元件通訊
- 1.當元件需要向子元件傳遞引數時，我們使用自定義屬性，再在子元件中使用props接收即可
- 2.當子元件需要向父元件傳遞資料時，我們使用自定義事件，在子元件中使用$emit()觸發並回傳資料
自定義事件，在子元件中無需接收，可以直接使用。自定義屬性，在子元件必須使用props接收，否則用不了
插槽
- 如何理解插槽？當我們封裝自定義元件時，從元件結構的角度看，某些結構是不確定的，那麼我們使用slot佔個位置。當這元件被真正使用時，才能夠確定這個位置放什麼元素，這就叫”插槽“（插座，有插孔，但是你不確定插什麼）
- 結論：以後封裝元件，哪個地方不確定，就放一個slot佔位置。如果有多個地方不確定，就放多個不同的slot
- 如何區分slot的不同呢？使用”命名插槽“，給slot name=’‘
- 1.slot預設叫”default“
- 2.v-slot是一個指令，用於指定用哪個slot來顯示當前元素，簡寫#
- 3.slot xxx 可以新增任意的自定義屬性，在父元件中使用v-slot來獲取資料
看結構的不同來確定哪裡用slot呀
