vue基礎-組件&插槽
組件
組件化的意義：封裝（復用，把邏輯隱藏起來，提高可維護性），快速開發（搭積木）
約定：我們通常把那些除了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呀
