props
父給子傳值
// child
props:
// parent
// child事件匯流排this.$emit('add', good)
// parent
任意兩個元件之間傳值常用事件匯流排 或 vuex的方式
class bus
}$on(name, fn)
$emit(name, args)
}}// main.js
vue.prototype.$bus = new bus()
// child1
this.$bus.$on('foo', handle)
// child2
this.$bus.$emit('foo')
建立唯一的全域性資料管理者store,通過它管理資料並通知元件狀態變更。
$parent/$root
兄弟元件之間通訊可通過共同祖輩搭橋,$parent或$root。
// brother1
this.$parent.$on('foo', handle)
// borther2
this.$parent.$emit('foo')
父元件可以通過$children訪問子元件實現父子通訊
// parent
this.$children[0].xx = '***'
$attrs/$listeners
包含了父作用域中不作為 prop 被識別 (且獲取) 的特性繫結 ( class 和 style 除外)。當乙個元件沒有
宣告任何 prop 時,這裡會包含所有父作用域的繫結 ( class 和 style 除外),並且可以通過 v-
bind="$attrs" 傳入內部元件——在建立高階別的元件時非常有用。
// child:並未在props中宣告foo
}// parent
獲取子節點引用
// parent
mounted()
能夠實現祖先和後代之間傳值
// ancestor
provide()
}// descendant
inject: ['foo']
匿名插槽
// comp
// parent
hello
將內容分發到子元件指定位置
// comp2
// parent
具名插槽
內容。。。
分發內容要用到子元件中的資料
// co***
// parent
來自子元件資料:}
Vue元件通訊總結
直接給元件，新增屬性，在子元件中，使用props進行接收。子元件 props foo aoo 屬性的傳遞，也可以傳遞乙個方法，在子元件中執行這個方法，可以把引數傳遞到父元件中，達到通訊的目的。1 有兩種常見的方式，第一種方式，元件上定義事件。觸發這個事件的時候，直接使用emit。this.emit ...
vue 元件間通訊總結
父 子元件通訊 1.props 此處不區分是否加引號，若不bind，皆作字串處理，否則作為表示式處理 若傳入物件，則子元件上的該物件與父元件中的該物件指向同乙個位址，如果希望對傳入的物件進行修改且不影響父元件，則需要看情況對其進行深 淺拷貝 若傳入的屬性在父元件中會發生變化，則將其放置在子元件的co...
vue元件通訊方法總結
3 總結 在vue中，資料處理與傳遞是每個開發者要面對的事情，學習正確使用各種資料處理方式同時，我們可以跟進一步學習資料高效的傳遞方式，以下介紹vue2.x中常用的幾種資料處理用到的方法 常用的資料處理分以下幾種情況 2.1 瀏覽器原生方法 sessoin是瀏覽器原生訪問資料方法，常用於全域性資料的...