Vue之數據傳遞的方法

1.父組件向子組件傳值

父組件

<template>
    <div>
        <block-a :out-data="x"></block-a>
    </div>
</template>

<script> import blockA from './block-a'; export default { name: "App", components:{ blockA }, data(){ return { x:123 } }, mounted(){ setTimeout(()=>{ this.x = 789; },1000) } } </script>

子組件

<template>
    <div> 這是子組件 {{outData}} </div>
</template>

<script> export default { name: "block-a", props:['outData'], watch:{ outData(newVal){ console.log("新的值是：" + newVal) } } } </script>

運行效果，界面先展示123，一秒后展示789，控制台僅輸出了“新的值：789”。

結論：簡單的數值類型能通過props動態反映到子組件內，而且能被子組件watch檢測。

2.子組件向父組件傳值

子組件

<template>     <div class="app">        <input @click="sendMsg" type="button" value="給父組件傳遞值">     </div>
</template>
<script> export default {     data () {         return { //將msg傳遞給父組件
            msg: "我是子組件的msg",         }     }, methods:{ sendMsg(){ //func: 是父組件指定的傳數據綁定的函數，this.msg:子組件給父組件傳遞的數據
             this.$emit('func',this.msg) } } } </script>

子組件通過this.$emit()的方式將值傳遞給父組件。注意：這里的func是父組件中綁定的函數名

父組件

<template>
    <div class="app">
        <child @func="getMsgFormSon"></child>
    </div>
</template>
<script> import child from './child.vue' export default { data () { return { msgFormSon: "this is msg" } }, components:{ child, }, methods:{ getMsgFormSon(data){ this.msgFormSon = data console.log(this.msgFormSon) } } } </script>

3.路由傳值

對應的路由配置模塊

, { path: '/editCardetail', name: 'editCardetail', component: EditCardetail }, 

1、使用$router.push 拼接參數傳參

this.$router.push('/editCardetail?editType=add')

其中editType=add即為傳遞的參數

2、 使用name來確定匹配的路由，通過params來傳遞參數

this.$router.push({ 　　name: 'editCardetail', 　　params: { 　　　　editType: add 　　} })

3、使用path來匹配路由，然后通過query來傳遞參數

this.$router.push({ path: '/editCardetail', query: { editType: add } })    

注意path不能與params一起使用，需要通過path來匹配路由的時候，使用query來傳參。
query要用path來引入，params要用name來引入，接收參數都是類似的，分別是this.route.query.name和this. route.query.name和this.route.query.name和this.route.params.name。
query更加類似於我們ajax中get傳參，params則類似於post，前者在瀏覽器地址欄中顯示參數，后者則不顯示

4. 通過localStorage或者sessionStorage來存儲數據

localStorage的使用

注：vue下使用localStorage和H5使用localStorage的方法是一致的，不需要引入插件

1、儲存

//數據
localStorage.setItem('userName','HelloWeen');

2、獲取

localStorage.getItem('userName')

3、刪除

localStorage.removeItem('userName');

4、localStorage可以儲存JSON對象，且沒有時間限制的數據存儲 ，除非主動刪除。

//數組
var arr=[1,2,3]; localStorage.setItem("temp",arr); //會返回1,2,3
console.log(typeof localStorage.getItem("temp"));//string
console.log(localStorage.getItem("temp"));//1,2,3

5、localStorage.setItem() 不會自動將Json對象轉成字符串形式

var user= {"userName": "hello","age": 2}; typeof localStorage.getItem("user");//也會返回String
localStorage.setItem("user", user);//但是返回[object Object],

6、用localStorage.setItem()正確存儲JSON對象方法是：

存儲前先用JSON.stringify()方法將json對象轉換成字符串形式

JSON.stringify() 方法可以將任意的 JavaScript 值序列化成 JSON 字符串

獲取的時候要將之前存儲的JSON字符串使用JSON.parse()先轉成JSON對象再進行操作

var user= {"userName": "hello","age": 2}; user= JSON.stringify(user); //轉化為JSON字符串 "{"userName":"hello","age":2}" localStorage.setItem("user", user);//返回{"userName":"hello","age":2} user=JSON.parse(localStorage.getItem("user"));

sessionStorage的使用

定義和使用
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數據。

sessionStorage 用於臨時保存同一窗口(或標簽頁)的數據，在關閉窗口或標簽頁之后將會刪除這些數據。

1、方法

sessionStorage.key(int index) //返回當前 sessionStorage 對象的第index序號的key名稱。若沒有返回null。
 sessionStorage.getItem(string key) //返回鍵名(key)對應的值(value)。若沒有返回null。
 sessionStorage.setItem(string key, string value) //該方法接受一個鍵名(key)和值(value)作為參數，將鍵值對添加到存儲中；如果鍵名存在，則更新其對應的值。
 sessionStorage.removeItem(string key) //將指定的鍵名(key)從 sessionStorage 對象中移除。
 sessionStorage.clear() //清除 sessionStorage 對象所有的項。

2、存儲數據

2.1 采用setItem()方法存儲

sessionStorage.setItem('testKey','這是一個測試的value值'); // 存入一個值

2.2 通過屬性方式存儲

sessionStorage['testKey'] = '這是一個測試的value值';

2.3 存儲Json對象

sessionStorage也可存儲Json對象：存儲時，通過JSON.stringify()將對象轉換為文本格式；讀取時，通過JSON.parse()將文本轉換回對象。

var userEntity = { name: 'tom', age: 22 }; // 存儲值：將對象轉換為Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity)); // 取值時：把獲取到的Json字符串轉換回對象
var userJsonStr = sessionStorage.getItem('user'); userEntity = JSON.parse(userJsonStr); console.log(userEntity.name); // => tom

3,讀取數據

3.1 通過getItem()方法取值

sessionStorage.getItem('testKey'); // => 返回testKey對應的值

3.2 通過屬性方式取值

sessionStorage['testKey']; // => 這是一個測試的value值

5.Vuex

介紹：Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。

理解：核心就是 store（倉庫），倉庫是用來干什么的？你就當它用來儲存東西的。

 

Vuex核心-store庫

上圖中虛線框的部分就是vuex，是公用的數據存儲區域，可以理解為一個store庫，這個庫主要由以下三部分組成：

• State：存放所有的公共數據，當組件使用公共數據時，直接去調用State就可以了。若 狀態發生變化，相應 的組件也會得到高效更新。
• Actions：存放組件需要調用的異步操作。若組件想要改變State中的數據，必須先通過Dispatch方法調用Actions（有時可以忽略調用Actions，直接調用Mutations），執行一些異步或同步操作
• Mutations：組件若要改變數據，先去調用Actions，通過Actions再根據Commit方法去調用Mutations，此時Mutations中存放的是同步的修改State的方法

 Vuex 的工作原理

首先vue組件會通過this.store.state或者mapState()直接從State中獲取數據。或者通過this.store.state或者mapState()直接從State中獲取數據。或者通過this.store.getters或者mapGetters（）從getters中獲取數據。getters是計算屬性數據 ，可以讀取State中的數據。

vue組件會通過$store.dispatch()或者mapActions觸發actions。之后，actions通過commit觸發mutations。而mutations會直接更新State中的數據