vue元件間傳值方式詳解

元件間的傳值分為兩大類

1.元件轉跳時的傳值（兄弟元件間的傳值）

2.父子元件間的傳值

3.通過Vuex進行傳值

1.兄弟元件間的傳值

解決思路：

用params和query進行傳值

A元件

1.A頁面中的代碼this.$router.push({name: 'XXX', params: {id: id}})
或
this.$router.push({path: '/XXX',name:'XXX  query: {id: id}})
           

B頁面

id :this.$route.params.id 
或
id :this.$route.query.id
           

通過query傳遞參數，頁面重新整理後，資料不會消失。但是params重新整理後會消失!`

但是想要通過pramas傳值且頁面資料不消失隻需要在路由配置中的path加上相應的參數即可

例: {name:'XXX',path:'/XXX/:id',component:XXX}

不過通過query傳參頁面的URL會顯示傳遞參數的資訊,params則不會。

總結params與query:

安全性:params不會在url上顯示傳遞的參數資訊,如果是重要的資訊推薦使用params

友善性：query不用重新配置路由就可以實作重新整理參數不消失

parmas與query的特征就是以上這些，各位可以按需來用(๑•̀ㅂ•́)و✧

2.父子元件間的傳值

例子：（父元件中注冊的子元件）

<pagination-font  
        :totalCount="totalCount"  
        :currentPath="currentPath"  
        @paging="otherData"        
        ></pagination-font>
           

1.父元件向子元件傳值

父元件

‘:totalCount’ : 子元件所需要接受的參數

‘totalCount’ : 父元件傳遞過去的參數

子元件

通過props進行接受值

props: {
      totalCount:  { 
      type: Number,      //接受值的類型
           default: 0    //預設值
           } 
      }
           

2.子元件向父元件傳值

子元件

自定義一個事件并向父元件傳遞

this.$emit("paging", response.data.allData.list);
           

父元件

在注冊的子元件中中加入接受方法的語句

@paging="OtherData"

@paging為接受子元件定義的方法（相當于連接配接父子元件的橋梁）

otherData為父元件定義的方法

OtherData(data) {
          this.messageList = data;  // data==response.data.allData.list
           }
           

3.通過Vuex進行傳參

Vuex相當于一個公共的場所，想要傳參隻需要對資料在vuex中

進行讀寫就好啦

• 先在vuex中對資料進行定義

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {    
table:""
}  

const mutations = { 
    GET_TABLE:(state,data)=>{   state.table=data  }
    }
    
const actions = {}
export default new Vuex.Store({ 
   state, 
   mutations,
   actions
   })
           

• 對資料進行寫入

this.$store.commit("GET_TABLE",table)
           

• 對資料進行讀取

this.$store.state.table
           

大家有木有覺得使用vuex感覺非常的友善呢︿(￣︶￣)︿

ps:至于vuex的安裝及配置，之後會出教程的呀(#`O′)