Vue頁面、組件之間傳參方式繁多，此處羅列出常用的幾種方式，歡迎審閱補充。
這里的路由傳參以編程式 router.push(...) 為例，聲明式 <router-link :to="..."> 與之類似。此處模擬情景為從 componentsA.vue 頁面跳轉到 componentsB.vue 頁面傳參。首先，路由配置信息如下：
router.js
import Vue from 'vue'import Router from 'vue-router'import componentsA from './components/componentsA' //在components下創建componentsA.vueimport componentsB from './components/componentsB' //在components下創建componentsB.vueVue.use(Router)export default new Router({ routes:[ { path:'/componentsA', name:'componentsA', component:componentsA }, { path:'/componentsB', name:'componentsB', component:componentsB } ]})1.1 路由配置傳參
首先確定自己要傳的參數名，將路由配置修改一下,傳name,age,sex三個參數：
{ path:'/componentsB/:name/:age/:sex', name:'componentsB', component:componentsB }在 componentsA.vue 頁面通過 this.$router.push 配置與之對應的參數：
componentsA.vue
<template> <div> <div>我是組件A</div> <button @click='routerToB1'>方式一跳轉到組件B</button> </div></template><script> export default{ data(){ return{ person:{name:'Gene',age:'18',sex:'male'} } }, methods: { routerToB1() { this.$router.push({ path:`componentsB/${this.person.name}/${this.person.age}/${this.person.sex}` }) } }, }</script><style></style>然后在 componentsB.vue 頁面用 this.$route.params 接收參數：
componentsB.vue
<template> <div> <div>我是組件B</div> </div></template><script> export default{ created(){ this.getRouterData() }, methods: { getRouterData(){ const param = this.$route.params console.log(param)//{name:'Gene',age:'18',sex:'male'} } }, }</script><style></style>點擊按鈕"方式一跳轉到組件B"，componentsB頁面打印出 {name:'Gene',age:'18',sex:'male'} ,成功獲取到A頁面傳過來的參數，并且地址欄顯示為 localhost:8889/#/componentsB/Gene/18/male （端口號根據自己設置的來），表明這種傳參方式url會攜帶參數。
1.2 params傳參
首先將剛才路由配置修改部分還原，在 componentsA.vue 頁面添加按鈕"方式二跳轉到組件B":
componentsA.vue
<template> <div> <div>我是組件A</div> <button @click='routerToB1'>方式一跳轉到組件B</button> <button @click='routerToB2'>方式二跳轉到組件B</button> </div></template>
在 methods 中添加方法 routerToB2 ，使用路由屬性 name 來確定匹配的路由，使用屬性 params 來傳遞參數：
componentsA.vue
routerToB2(){ this.$router.push({ name:'componentsB', params:{ exa:'我是傳到組件B的參數' } }) },componentsB.vue 保持不變，params傳參方式獲取參數也是通過 this.$route.params ，點擊A頁面新添加的按鈕"方式二跳轉到組件B"，在B頁面打印出 {exa: "我是傳到組件B的參數"} ，傳參成功，地址欄為 localhost:8889/#/componentsB ，表明這種方式url不會攜帶參數。
1.3 query傳參
這種方式和params傳參方式類似，在 componentsA.vue 頁面繼續添加按鈕"方式三跳轉到組件B":
componentsA.vue
<template> <div> <div>我是組件A</div> <button @click='routerToB1'>方式一跳轉到組件B</button> <button @click='routerToB2'>方式二跳轉到組件B</button> <button @click='routerToB3'>方式三跳轉到組件B</button> </div></template>
在 methods 中添加方法 routerToB3 ，使用路由屬性 name 或者 path 來確定匹配的路由，使用屬性 query 來傳參：
componentsA.vue
routerToB3(){ this.$router.push({ name:'componentsB',// path:'/componentsB' query:{ que:'我是通過query傳到組件B的參數' } }) }在 componentsB.vue 頁面通過 this.$route.query 來獲取參數：
componentsB.vue
getRouterData(){ const query = this.$route.query console.log(query)//{que: "我是通過query傳到組件B的參數"} }查看地址欄為 localhost:8889/#/componentsB?que=我是通過query傳到組件B的參數 ，顯然這種方式url會攜帶參數。
1.4 小結
/:id ，獲取參數都是通過 $route 而不是 $routerparams 傳參和 query 傳參區別類似于 post 和 get 方法。 params 傳參地址欄不會顯示參數，而 query 傳參會將參數顯示在地址欄中params 傳參刷新頁面參數會丟失，另外兩種不會params 傳參對應的路由屬性是 name ，而 query 傳參對應的路由屬性既可以是 name ，也可以是 path緩存方式即通過 sessionStorage 、 localStorage 、 Cookie 方式傳參，這種方式和是不是用Vue無關，因此，不談。
在components目錄下創建父組件 parent.vue 和子組件 children.vue ，在父組件中引入子組件。為了演示方便，在路由配置中加入 /parent 路徑。
3.1 父組件向子組件傳值 props
在 parent.vue 的子組件標簽上注冊message1,在 children.vue 中通過 props 接收message1，如果傳遞的值為變量，則使用 v-bind: 或直接用 : ，參考如下：
parent.vue
<template> <div> <div>我是父組件</div> <children message1='我是直接參數' v-bind:message2='msg' :message3='obj'></children> </div></template><script> import Children from './children' export default{ components:{ Children }, data(){ return{ msg:'我是父組件的參數' } }, created(){ this.obj = {a:'1',b:'2',c:'3'} } }</script><style></style>children.vue
<template> <div> <div>我是子組件</div> <div>{{message1}}</div> <div>{{message2}}</div> <div>{{message3}}</div> </div></template><script> export default{ props:['message1','message2','message3'], created(){ console.log(this.message3) } }</script><style></style>在瀏覽器中打開：
3.2 子組件向父組件傳值 $emit
子組件通過vm.$emit( event, […args] )，觸發當前實例上的事件。附加參數都會傳給監聽器回調。父組件在子組件標簽上監聽事件獲得參數。
children.vue
<template> <div style="margin-top: 100px;"> <div>我是子組件</div> <div>{{message1}}</div> <div>{{message2}}</div> <div>{{message3}}</div> <button @click='ChildToParent'>點我傳愛</button> </div></template><script> export default{ props:['message1','message2','message3'], data(){ return{ loud:'I love xx' } }, methods:{ ChildToParent(){ this.$emit('emitToParent',this.loud) } }, created(){ console.log(this.message3) } }</script><style></style>parent.vue
<template> <div> <div>我是父組件</div> <div>大聲告訴我你愛誰：{{loveWho}}</div> <children @emitToParent='parentSayLove' message1='我是直接參數' v-bind:message2='msg' :message3='obj'></children> </div></template><script> import Children from './children' export default{ components:{ Children }, data(){ return{ msg:'我是父組件的參數', loveWho:'' } }, methods:{ parentSayLove(data){ this.loveWho = data } }, created(){ this.obj = {a:'1',b:'2',c:'3'} } }</script><style></style>點擊按鈕瀏覽器顯示：
3.3 小結
props 可以是字符串數組，也可以是對象（可以類型驗證、設置默認值等） ；
使用 .native 修飾監聽事件，開發中使用了 element-ui 的框架標簽時候，使用事件綁定無效。這時候需要使用 .native 修飾 v-on:event ，可以在框架標簽或組件的根元素 上監聽一個原生事件，例如 <my-component v-on:click.native="doTheThing"></my-component> 。
非父子組件之間傳值，需要定義公共實例文件 bus.js ，作為中間倉庫來傳值，不然路由組件之間達不到傳值的效果。在components目錄下新建 first.vue 和 second.vue 以及公共文件 bus.js 。
bus.js
import Vue from 'vue'export default new Vue()
在 first.vue 和 second.vue 中分別引入bus.js。
import Bus from '../bus.js'
模擬情景： first.vue 向 second.vue 傳值。在 first.vue 通過在事件中添加 Bus.$emit( event, […args] ) 進行傳值，在 second.vue 中通過 Bus.$on(event,callBack) 進行監聽。
first.vue
<template> <div> <div>我是first.vue</div> <button @click="firstToSecond">點擊傳值給second.vue</button> </div></template><script> import Bus from '../bus.js' export default{ data(){ return{ msg:'我是first.vue傳到second.vue的參數' } }, methods:{ firstToSecond(){ Bus.$emit('emitToSecond',this.msg) } } }</script><style></style>second.vue
<template> <div> <div>我是second.vue</div> {{info}} </div></template><script> import Bus from '../bus.js' export default{ data(){ return{ info:'' } }, mounted(){ const that = this; Bus.$on('emitToSecond',function(data){ that.info = data }) } }</script><style></style>點擊按鈕，瀏覽器中顯示：
小結
兄弟組件之間與父子組件之間的數據交互，兩者相比較，兄弟組件之間的通信其實和子組件向父組件傳值有些類似，他們的通信原理都是相同的，例如子向父傳值也是 $emit 和 $on 的形式，只是沒有 Bus ，但若我們仔細想想，此時父組件其實就充當了 Bus 這個事件總線的角色。
何為Vuex，看一下官網的解釋：
Vuex 是一個專為 Vue.js 應用程序開發的 狀態管理模式 。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。
什么情況下使用Vuex?
Vuex 可以幫助我們管理共享狀態，并附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。
如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗余的。確實是如此――如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的store 模式就足夠您所需了。但是，如果您需要構建一個中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成為自然而然的選擇。
在components目錄下新建 vuexA.vue 和 vuexB.vue ，模擬場景： vuexA.vue 向 vuexB.vue 傳值。
首先我們安裝vuex， npm install vuex --save ，在src目錄下創建vuex目錄，然后在vuex目錄下新建 index.js 、 state.js 、 getters.js 、 actions.js 、 mutations.js ：
vuex/index.js
import Vue from 'vue'import Vuex from 'vuex'import state from './state.js'import mutations from './mutations.js'import getters from './getters.js'import actions from './actions.js'Vue.use(Vuex)export default new Vuex.Store({ state, getters, mutations, actions})在main.js中引入vuex/index.js并注入到Vue中：
main.js
import Vue from 'vue'import App from './App.vue'import router from './router'import store from './vuex'Vue.config.productionTip = falsenew Vue({ store, router, render: h => h(App),}).$mount('#app')state.js
export default{ city:'nanjing'}vuexA.vue
<template> <div> <div>我是vuexA中city參數：{{city}}</div> <input type="text" :value="city" @change="change"> </div></template><script> export default{ methods:{ change(e){ this.$store.dispatch('setCityName',e.target.value) } }, computed:{ city(){ return this.$store.getters.getCity } } }</script><style></style>vuexB.vue
<template> <div> <div>我是vuexB中的city參數：{{city}}</div> </div></template><script> export default{ data(){ return{ } }, computed:{ city(){ return this.$store.state.city } } }</script><style></style>actions.js
export default{ setCityName({commit,state},name){ commit('setCity',name) }}mutations.js
export default{ setCity(state,name){ state.city = name//設置新的值 }}getter.js
export default{ getCity(state){ return state.city//返回目前城市名稱 }}在瀏覽器中打開：
修改input中的值：
顯而易見，當vuexA頁面中input值改變時，可同時改變vuexB頁面中的值，即將city參數從vuexA頁面傳到了vuexB頁面，從而實現用vuex在組件中傳值。
vuex更多詳細功能請參考Vuex中文官方文檔。
全部實例代碼已上傳至 我的GitHub，歡迎訪問Fork。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
