vue基礎-元件&插槽

離空半夏 發表於 2021-10-23
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 簡寫為#
    image

父子元件通訊

  • 1.當元件需要向子元件傳遞引數時,我們使用自定義屬性,再在子元件中使用props接收即可
  • 2.當子元件需要向父元件傳遞資料時,我們使用自定義事件,在子元件中使用$emit()觸發並回傳資料
    自定義事件,在子元件中無需接收,可以直接使用。自定義屬性,在子元件必須使用props接收,否則用不了

插槽

  • 如何理解插槽?當我們封裝自定義元件時,從元件結構的角度看,某些結構是不確定的,那麼我們使用slot佔個位置。當這元件被真正使用時,才能夠確定這個位置放什麼元素,這就叫”插槽“(插座,有插孔,但是你不確定插什麼)
  • 結論:以後封裝元件,哪個地方不確定,就放一個slot佔位置。如果有多個地方不確定,就放多個不同的slot
  • 如何區分slot的不同呢?使用”命名插槽“,給slot name=’‘
    • 1.slot預設叫”default“
    • 2.v-slot是一個指令,用於指定用哪個slot來顯示當前元素,簡寫#
    • 3.slot xxx 可以新增任意的自定義屬性,在父元件中使用v-slot來獲取資料

看結構的不同來確定哪裡用slot呀
image
image