Vue 多個平行頁面間傳值，非元件間傳遞，簡單易懂

2021-10-06 20:51:38 字數 1404 閱讀 1198

a頁面和b頁面是兩個平行頁面，非父子元件關係，先要將a頁面的引數傳遞到b頁面中。

⚠️注意 ：query 中的引數 params ，需要使用json.stringify({})方法，把物件轉化成json字串

新建訂單
add() )}


})},
我們直接使用this.$route.query.row來獲取路由傳遞過來的引數！

created() ,
a頁面使用瀏覽器的本地儲存方法,把要傳遞的引數，儲存在瀏覽器中

// 本地儲存


localstorage.setitem('params',json.stringify()) 


// 會話儲存


sessionstorage.setitem('params',json.stringify())
// 本地儲存中取值


let params = json.parse(localstorage.getitem('params')); 


// 會話儲存中取值


let params = json.parse(sessionstorage.getitem('params'));
僅在當前會話下有效，關閉頁面或者瀏覽器後被清除；存放資料大小一般為5mb；

// 儲存：以「key」為名稱儲存乙個值「value」


sessionstorage.setitem("key","value");


///獲取名稱為「key」的值


sessionstorage.getitem("key");


//刪除名稱為「key」的資訊。


sessionstorage.removeitem("key");


​//清空sessionstorage中所有資訊


sessionstorage.clear();
生命週期永久，除非使用者清除瀏覽器中的localstorage資訊，否則永遠存在；存放資料大小一般為5mb；僅在瀏覽器中儲存，不參與伺服器通訊；

//以「key」為名稱儲存乙個值「value」


localstorage.setitem("key","value");


//獲取名稱為「key」的值


localstorage.getitem("key");


//刪除名稱為「key」的資訊。


localstorage.removeitem("key");


​//清空localstorage中所有資訊


localstorage.clear();

Vue元件間傳值

在父元件中給子元件傳值 父元件操作 1.import watermark from components watermark 引入子元件2.componenta為元件的名稱 import中的名稱 a為組建中暴露的資料名 b為data中或者computed中的欄位名稱 3.子元件中在props中寫a的...

Vue元件間傳值

vue元件間傳值 父元件 通過自定義屬性 home vue logo src assets logo.png click textupdate id imgs msg div template 子元件 通過 props 來接收 hello h1 div export default script 子...

vue元件間傳值

父元件傳遞 子元件接接收 props reservation array,使用props props title likes ispublished commentids author props props 預設值可以是物件或陣列，它需要從乙個工廠函式返回 validator function v...