Vue傳參總結

前言

vue傳參，其實說白了就是把值從乙個.vue傳給另乙個.vue，我能想到的暫時只有三種傳值方法，分別是父子元件之間的傳值（props）、利用router傳值、vuex。這三種傳值分別對應著不同的應用場景：關係型（父子關係、路由關係）和無關係型。接下來看一看具體操作。

1、props傳值

prpos傳值的應用場景：兩個vue之間存在父子關係，即乙個.vue引入了另乙個.vue元件，那麼這種情況下採用props傳值最為方便。下面這個例子我傳了兩個值進去，如下：


>
>
:style=""
>
>
使用者id：}span
>
>
>
使用者名稱：}span
>
div>
div>
template
>
>
export
default},
curriheight:}}
}script
>


>
>
:datas
="userdata"
:curriheight
="height"
>
example
>
div>
template
>
>
import example from
'../../components/example.vue'
//引入元件
export
default
,//註冊元件
data()
, height:
100}}}
script
>

2、router傳值

router傳值的應用場景：存在路由關係，即乙個.vue頁面跳轉到另乙個.vue頁面，此時最好使用路由跳轉，在這種情況下，使用路由傳值最方便。而路由傳值也有三種方式，第一種是router物件進行傳值、第二種是路由標籤進行傳值、第三種是vue-router利用url進行傳值。

2.1 router物件傳參

>
>
home頁
@click
="toexample1"
>
按鈕1到example頁button
>
@click
="toexample2"
>
按鈕2到example頁button
>
div>
template
>
>
export
default
, height:
100}),
methods:})
;}，toexample2()
});}
}}script
>

import vue from
"vue"
;import vuerouter from
"vue-router"
;vue.
use(vuerouter)
;const routerpush = vuerouter.prototype.push
vuerouter.prototype.
push
=function
push
(location)
const routes =[,
];const router =
newvuerouter()
;export
default router;

需要注意的是一下幾點：

1、.vue頁面的js部分name一定要和路由的name一致，否則容易報錯

2、在選擇router的傳值的時候，需要注意，params傳值時不能用path傳，params就像時進行post傳值一樣，不能通過路徑傳值，所以params不能和path搭配使用

2.2 標籤傳值


>
>
:to=
"}">
example頁router-link
>
div>
template
>
>
export
default
, height:
100}}}
script
>


>
>
:style=""
>
>
使用者id：}span
>
>
>
使用者名稱：}span
>
div>
div>
template
>
>
export
default
,curriheight()
}}script
>

3、vuex

其實vuex不應該叫傳值，他是共享值，所以，在乙個vue頁面和另乙個vue頁面沒有任何關係的情況下，可以利用vuex進行傳值。具體操作如下：

1、開啟這樣的vuex的js檔案，配置一下需要共享的引數

const state=
, curriheight:
100,
}const getters=
,getcurriheight
(state)
}const mutations=
,setcurriheight
(state,curriheight)
}const actions=
,userdata)
,takecurriheight
(,curriheight)
}export
default

2、在home.vue中給變數賦值

>
import
from
'vuex'
export
default
, height:
100}),
mounted()
, methods:}}
script
>

3、在example.vue中獲取變數

>
export
default
,curriheight()
}}script
>

值得注意的點是：前後邏輯問題，主要體現在先修改vuex的state的狀態，然後再獲取，從而達到傳值的效果。

關於vuex狀態管理，可以參考vuex之狀態管理（vuex）

下一章：非vue傳參——儲存器sessionstorage和localstorage

Vue傳參總結

vue傳參，元件之間傳參路由傳參 vuex

Vue頁面跳轉時傳參總結

vue頁面跳轉傳參問題傳參

Vue傳參總結

vue傳參，元件之間傳參 路由傳參 vuex

Vue頁面跳轉時傳參總結

vue頁面跳轉傳參問題傳參

相關推薦

vue傳參，元件之間傳參路由傳參 vuex