vue如何實現跨頁面?zhèn)鬟f與接收數組并賦值
跨頁面?zhèn)鬟f與接收數組并賦值
為更好讓大家理解拿自己的項目做例子并附上動圖效果，可以看到將第一行數據選中的一行賦值到了另一個界面：為了更好讓大家理解拿去附用將我每個界面和方法屬性的命名都介紹給大家：
兄弟界面跳轉：question-edit——>add-question
1.界面A：question-edit
想要將本行的數據賦值過去，因為不是一個所以要用到數組，將它們打包好，首先第一步我們的入口在操作的編輯圖標上
1.編輯圖標代碼：
<template slot-scope="scope"> <el-button @click="addQuestion(scope.row)" type="text" size="small" icon="el-icon-edit"></el-button> </template>
點擊事件中的addQuestion是自己定義的界面跳轉方法。確定本行攜帶數據加入模板插槽后，在跳轉方法中加入(scope.row)
2.方法addQuestion
addQuestion(row) {
this.carryCurrentRowCode = row;
this.$router.push({
path: "add-question",
//query: this.carryCurrentRowCode
query: {
carryCurrentRowCode: this.carryCurrentRowCode
}
});
},跳轉功能的實現主要是path: "add-question"起到的作用。
界面跳轉詳情可以了解詳細文章：http://www.dbjr.com.cn/article/245670.htm
注意：注釋的一行不能實現，用下方帶括號的。
下方carryCurrentRowCode: this.carryCurrentRowCode
前邊的是接收界面用到的接收數組，我這里把他們名字命名一樣了，實際前后可以不同。
3.carryCurrentRowCod是定義的數組
export default {
data() {
return {
//點擊編輯 攜帶當前行的參數數組
carryCurrentRowCode: {
questionTypeId: "",
serial: "",
questionClassifyId: "",
questionContent: "",
degreeInitial: ""
},
}數組中括號的是帶的組件的數據。括號里加自己想攜帶的數據。
2.界面B：add-question
1.拿過傳遞過來的數組
export default {
data() {
return {
// 傳遞過的數組
carryCurrentRowCode: {}
}；2.因為拿過來的數組是在界面一加載就顯示出來的，所以傳遞過來的數組方法和將值賦值到對應的組件中都要卸載鉤子函數中
created() {
// 從question-edit界面接收到carryCurrentRowCode數組
this.carryCurrentRowCode = this.$route.query.carryCurrentRowCode;
}3.傳遞過來的數組是拿到了，具體將一個值賦值到組件中舉一個例子：用試題編號舉例serial: "",
// 試題編號
this.i_number = this.carryCurrentRowCode.serial;同樣將賦值寫到鉤子函數中。
解釋i_number
是組件el-input試題編號v-model="i_number"
注意：
如果不是兄弟接收界面的命名命名好了，可以減少這個組件賦值步驟，直接在組件的v-model中等于接收數組點serial
數組賦值踩過的坑
最近需要在Vue當中完成動態(tài)賦值數組操作，從服務器拿到數據后，刷新數組中的數據，但是發(fā)現無論使用什么方法都不行，通過打log,發(fā)現數據在這里就無法向下執(zhí)行，而且也沒有報任何的異常，最終問題解決，在這里做個記錄。
Vue中的數組賦值和在普通的JS中賦值還是有所區(qū)別。
以下操作可以引起界面刷新：push，pop ，unshift，shift，reverse，sort，splice
以下操作不會引起界面刷新：slice，concat ，filter
還有一點需要注意：
如果通過直接賦值或者改變長度是無法讓界面刷新的。
（1）通過索引直接設置項。
（2）修改數組長度，mylist.length=3
第二點，在從服務器中獲取數據后賦值需要注意一個問題：主體對象的改變。
比如在使用axios對象發(fā)起請求后，在返回方法中處理數據需要注意：
注意在axios的then方法中調用對象時，不能使用this對象，因為此時this對象指的是axios實例，所以通過this是獲取不到vue實例中的data數據的，必須在外界使用一個值來指向vue實例對象，通過這個外部對象來賦值，才是正確的。
var self;
created:function(){
self = this;
},
mouted:function(){ ? ? ? ?
axios.create({
? ? ? ? baseURL: 'url',
? ? ? ? timeout: 10000,
? ? ? ? headers: { 'Content-Type': 'application/json' }
? ? ? }).get('xxxxxxxxxx')
? ? ? ? ? .then(function(response){
? ? ? ? ? ? if(response.data.dataList.length>0){
? ? ? ? ? ? ? var datalist = response.data.dataList;
? ? ? ? ? ? ? for(var i=0;i<datalist.length;i++){
? ? ? ? ? ? ? ? self.DeviceTypeList.push({devicetype:datalist[i].name});
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? ? .catch(function(error){
? ? ? ? ? ? console.log(JSON.stringify(error));
? ? ? ? ? });
}以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue之Element級聯(lián)選擇器多選傳值以及回顯方式(樹形結構)
這篇文章主要介紹了Vue之Element級聯(lián)選擇器多選傳值以及回顯方式(樹形結構)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue表單數據的綁定的相關資料，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
這篇文章主要為大家介紹了Vue3通用API功能示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。本文介紹下Vue Router的安裝與使用2021-06-06
這篇文章主要為大家詳細介紹了vue?Echarts實現儀表盤案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家介紹了利用Vue3指令實現水印背景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要為大家詳細介紹了Vue實現跑馬燈樣式文字橫向滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了axios攜帶cookie配置詳解(axios+koa)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue項目啟動如何設置默認啟動頁問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Ant Design Pro 菜單自定義 icon，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11