3、總結
在vue中，資料處理與傳遞是每個開發者要面對的事情，學習正確使用各種資料處理方式同時，我們可以跟進一步學習資料高效的傳遞方式，以下介紹vue2.x中常用的幾種資料處理用到的方法；
常用的資料處理分以下幾種情況：
2.1 瀏覽器原生方法
sessoin是瀏覽器原生訪問資料方法，常用於全域性資料的儲存與使用。通常有***sessionstorage、localstorage***兩種方式，基本用法相同，用法如下：
// 將資料放入快取sessionstorage
sessionstorage.
setitem
('key'
,'value');
// 從sessionstorage獲取資料
var data = sessionstorage.
getitem
('key');
// 從sessionstorage刪除儲存的資料
sessionstorage.
removeitem
('key');
// 從sessionstorage刪除所有儲存的資料
sessionstorage.
clear()
;// 將資料放入快取localstorage
localstorage.
setitem
('key'
,'value');
// 從localstorage獲取資料
var data = localstorage.
getitem
('key');
// 從localstorage刪除儲存的資料
localstorage.
removeitem
('key');
// 從localstorage刪除所有儲存的資料
localstorage.
clear()
;
2.2 emit，props父子傳值
props用法
props：父元件向子元件傳遞資料；子元件通過props宣告需要從父元件接收的資料。props除了可以傳遞變數以外，還可以傳遞方法以及對接收的資料進行資料驗證；**如下：
父元件傳值：
<
!-- 使用子元件，title為傳遞到子元件引數 --
>
"title" @goback=
"goback"
>
<
/title-bar>
<
/div>
<
/template>
// 引入元件
import titlebar from
"@/components/titlebar"
;export
default
,data()
;},}
子元件接收值的同時，可以在props內進行資料驗證以及設定預設值，如下**所示，子元件接收父元件傳遞過來的title值。
props:
,}
在子元件中使用$emit來觸發事件，父元件中使用$on來監聽子元件事件；如上父元件**中，goback就是父元件監聽的子元件事件，在子元件中使用方法如下：
methods:
}
//子元件中使用emit觸發事件，並帶引數5
clickhandle()
//父元件中，引入元件，繫結事件
<
!-- 引入元件，繫結事件changecounter --
>
"changecounter"
>
<
/t-button>
// methods中， 繫結該方法並接受子元件傳遞過來的引數data
changecounter
(data)
,
2.3 索引
vue使用"$"來引用例項時，這種引用我們稱之為索引。通過索引我們可以實現父元件訪問子元件例項，也可以實現子元件訪問父元件，使用索引可以進行遞迴向上或者向上訪問，一直到最底層或者根例項。索引分以下幾種：
以第三種ref為例，訪問乙個例項可以訪問乙個元件裡面所有的方法和宣告的資料；使用方法如下**：
"coma"
>
<
/component-a>
<
/div>
<
/template>
import componenta from
"./components/componenta "
;export
default
,created()
, methods:}}
;<
/script>
2.4 router傳參
使用path跳轉時，路由傳參通過query方式；
使用name跳轉時，路由傳參通過params』方式；
這裡的path和name都是我們路由檔案對應的鍵值；如下：
,
path路由傳參
// path跳轉對應query方式傳參
this
.$router.
push(}
)
// 使用query取參
this
.stuno =
this
.$route.query.stuno；
// // name跳轉對應params方式傳參
this
.$router.
push(}
)
// 使用params取參
this
.stuno =
this
.$route.params.stuno；
2.5 bus匯流排
bus是vue中的**事件匯流排，通常用來兄弟元件間通訊，若需要考慮兄弟元件之間通訊的時效性的話，使用bus匯流排即輕量，又可以解決效率問題。
通常我們若在專案中使用bus，都會宣告乙個工具檔案，專門用來使用bus通訊，乙個專案乙個檔案就可以，bus使用方法如下：
在專案中建立公共檔案
在util資料夾下建立bus.js檔案，檔案內容如下：
import vue from
"vue"
;const bus =
newvue()
;export
default bus;
監聽需要通訊的元件，引入bus，傳遞引數，**如下：
// 監聽**號碼的變化，每次變化使用emit觸發傳參
settelno()
監聽需要通訊的元件，引入bus，接收引數
// 接收引數
bus.
$on(
"mobno"
, telno =>
);
vuex被稱之為狀態管理，解決的問題與bus類似，監聽某個值變化並實施更新相應元件值；與bus不同的是vuex一般用於複雜的場景，作用域是監聽某乙個值改變整個專案相關元件的狀態。對於小型專案使用bus即可解決絕大多數問題。
關於vuex的使用，分為四部：
安裝vuex
main.js全域性引入
儲存監聽的變數
事件響應
具體使用方法我們開乙個專題進行討論，後續推出再進行更新，歡迎**。
vue主要處理檢視和資料兩層，我們這裡已經介紹了常用的資料通訊方式，基本的技能是可以熟練運用這些方式進行資料處理，高階的學習還需要更深一步學習，如學習如何高效處理資料以及資料安全方面。希望對各位有所幫助，有不足的地方希望能指出，共同學習進步。
Vue元件通訊總結
直接給元件，新增屬性，在子元件中，使用props進行接收。子元件 props foo aoo 屬性的傳遞，也可以傳遞乙個方法，在子元件中執行這個方法，可以把引數傳遞到父元件中，達到通訊的目的。1 有兩種常見的方式，第一種方式，元件上定義事件。觸發這個事件的時候，直接使用emit。this.emit ...
vue 元件間通訊總結
父 子元件通訊 1.props 此處不區分是否加引號，若不bind，皆作字串處理，否則作為表示式處理 若傳入物件，則子元件上的該物件與父元件中的該物件指向同乙個位址，如果希望對傳入的物件進行修改且不影響父元件，則需要看情況對其進行深 淺拷貝 若傳入的屬性在父元件中會發生變化，則將其放置在子元件的co...
vue元件通訊總結 簡述
props 父給子傳值 child props parent子給父傳值 child this.emit add good parent 事件匯流排 任意兩個元件之間傳值常用事件匯流排 或 vuex的方式 class bus on name,fn emit name,args main.js vue....