參考:寫的很詳細)
《vue.js實戰》
本人實際操作:
我這邊籠統說一下
1.props/$emit
概念:父元件通過props
的方式向子元件傳遞資料,而通過$emit
子元件可以向父元件通訊。
2.$children/$parent
概念: 通過$parent
和$children
就可以訪問元件的例項。
使用 this.$parent查詢當前元件的父元件。
使用 this.$children查詢當前元件的直接子元件,可以遍歷全部子元件, 需要注意 $children 並不保證順序,也不是響應式的。
3.provide/ inject
概念:provide
/inject
是vue2.2.0
新增的api, 簡單來說就是父元件中通過provide
來提供變數, 然後再子元件中通過inject
來注入變數。
4.ref/ refs
概念:ref
:如果在普通的 dom 元素上使用,引用指向的就是 dom 元素;如果用在子元件上,引用就指向元件例項,可以通過例項直接呼叫元件的方法或訪問資料
5.eventbus
概念:eventbus
又稱為事件匯流排,在vue中可以使用它來作為溝通橋梁的概念, 就像是所有元件共用相同的事件中心,可以向該中心註冊傳送事件或接收事件, 所以元件都可以通知其他元件。
6.vuex
概念:vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可**的方式發生變化. vuex 解決了多個檢視依賴於同一狀態
和來自不同檢視的行為需要變更同一狀態
的問題,將開發者的精力聚焦於資料的更新而不是資料在元件之間的傳遞上。
7.localstorage / sessionstorage
8.attrs/$listeners
概念:是vue2.4.0引入的該方法,為了解決跨級的元件
常見使用場景可以分為三類:
初識vue 8 父子元件通訊示例
子元件中設定props屬性,去接收父元件資料。為什麼要設定屬性去接收?因為v bind指令就是動態的給值,v bind 子元件屬性變數 父元件存放資料變數 子元件 emit發射事件,並且攜帶引數一起發射。父元件在外部用v on接收傳送的事件和傳出的值。下面是乙個示例,大概是父元件把number1 n...
學習Vue(8) 表單
表單是前端中用到非常多的部分,這裡將用vue實現資料的雙向繫結。可以用 v model 指令在表單控制項元素上建立雙向資料繫結。使用v model進行雙向繫結資料,即一邊的資料發生變化,另一邊的資料也發生變化。密碼 備註 瀏覽器顯示 核取方塊如果是乙個為邏輯值,如果是多個則繫結到同乙個陣列。選中的值...
vue元件之間通訊的8種方式
對於vue來說,元件之間的訊息傳遞是非常重要的,下面是我對元件之間訊息傳遞的常用方式的總結。1.props和 emit 父元件向子元件傳遞資料是通過prop傳遞的,子元件傳遞資料給父元件是通過 emit觸發事件來做到的.1 vue.component child 6 7 template 8 9 1...