1. 程式人生 > >Vue 元件通訊總結

Vue 元件通訊總結

父-子元件通訊

通過Props / Attrs,注意:

  • 此處不區分是否加引號,若不bind,皆作字串處理,否則作為表示式處理
  • 若傳入物件,則子元件上的該物件與父元件中的該物件指向同一個地址,如果希望對傳入的物件進行修改且不影響父元件,則需要看情況對其進行深、淺拷貝
  • 若傳入的屬性在父元件中會發生變化,則將其放置在子元件的computed或watch(deep:true)中以檢測變化
  • 若要根據該屬性去修改以此為基礎的其他屬性,則使用computed的get/set或watch(deep:true)
    ps: 也可以直接在父元件中獲取子元件的例項從而再呼叫子元件的方法、訪問子元件的屬性等(不常用)

子-父元件通訊

  • 通過給子元件繫結事件,父元件監聽子元件事件或$emit 觸發的自定義事件,從而獲取子元件傳入的實引數據
  • 通過$parent

兄弟元件通訊

  • 藉助公用的一個vue例項的事件來傳遞資料(Bus通訊),即$on繫結事件,再使用$emit觸發該事件
  • 兄弟元件間通過路由跳轉時,可通過路由攜帶的params傳資料
  • Vuex,比較複雜,建議龐大的系統再使用

祖先元件與子孫元件通訊

  • 通過依賴注入,即provide、inject
  • 通過Attrs,由於元件傳入不被props接收的屬性,可以被子元件通過$attrs訪問,故同樣可在子元件向孫元件傳遞資料時使用該方法,從而達到祖孫元件與子孫元件通訊,可使用v-bind=’$attrs’將沒有被props接收的屬性同時傳遞給子元件

歡迎關注、點贊