vue中頁面、父子組件、兄弟組件之間的傳參

1、頁面之間的傳參

• 可以利用本地存儲localStorage，將需要傳過去參數在本地存儲中進行保存，

  localStorage.setItem("參數名"，參數值)

  然后再到另外一個頁面中獲取。

  localStorage.getItem("參數名")　　

　　　所有頁面之間使用。

注意：如果頁面之間是用v-if的形式切換的話，每次切換的時候都會重新加載數據，重新渲染頁面，所以為了不頻繁操作數據，可以判斷本地存儲中是否存在，存在則不需要重新獲取了。

• 路由之間頁面跳轉
1、標簽跳轉及傳參（router-link）

      

2、js控制跳轉路由及傳參 

      

 　　　3、（this.$router.push）路由組件傳參

      

 

 參考博客：https://www.cnblogs.com/freedom-feng/p/11528836.html

2、父子之間的傳參

父=>子

父組件：v-bind綁定屬性

<child :propsVal = "msg" ></child>
//propsVal 為自定義屬性名
//msg為父組件的內容，傳過去的參數　　

子組件：prop:["propsVal"] ，接收屬性，在子組件中可以直接使用該屬性名

 

父獲取子組件的信息，還可以通過ref的形式

子=>父

子組件：v-on綁定事件

<button @click="fun">傳給父</button>

fun(){
  this.$emit("Pfun”,"data")  
}
//Pfun為自定義的事件名稱
//data為傳過去的參數

父組件：

<child @Pfun="childFun"></child>
//Pfun為子組件自定義的事件名
//childFun為父組件的方法

childFun(res){
  //res為子傳過來的參數  
}

　　

3、兄弟之間的傳參

參考文獻：https://www.cnblogs.com/blueball/p/11058600.html

使用中央事件總線、發布訂閱模式EventBus的形式傳參

第一個頁面發送：

<button @click="sendMsg">傳給消息給第二個頁面</button>

sendMsg(){
  this.$emit("事件名xx","參數data")  
}

第二個頁面接收：　

mounted(){
  this.$on("事件名xx",(參數data)=>{
        this.msg = data
    })  

接收時，需要在mounted中，監聽事件名xx，並吧傳遞過來的時間通過$on監聽回調函數

 

總是被問到，總是回答的也是很粗略，好好整理，好好總結，相信可以做到的。

謝謝廣大網友！！！