vue組件之間的傳值

vue中組件之間的傳值有好幾種狀況

一、父向子傳值

父組件向子組件傳值使用props，直接上實例

city.vue是父組件，list.vue是子組件
city.vue裏定義cities和hotCities。這兩個數據是放在圖二位置。而:cities :hot是經過子組件props來接收的。

city.vue

data裏定義cities ,letter,hotCities

對應的子組件list.vue中 使用props 接收cities， hot,還有letter

 

 

 二、子組件向父組件傳值

使用emit event

alphabet.vue是子組件

 

子組件經過this.$emit('change',this.letters[index]);將change事件觸發出去，同時將,this.letters[index]參數傳出去

city.vue是父組件

使用@change="handleLetterChange"

handleLetterChange（letter），這個letter就是子組件this.letters[index]參數，再將letter賦值給當前頁面的數據 this.letter.因此說子向父傳值經過$emit發送事件以及參數

handleLetterChange (letter){
      this.letter = letter
      console.log(letter);
    }

　三、非父子組件之間的傳值

一、使用bus，個人博客裏有說，暫不講

二、兄弟組件之間的傳值，能夠經過公共的父組件進行傳值。

拿剛剛的一個例子來講 子組件是list.vue和alphabet.vue，父組件是city.vue

　alphabet.vue是子組件先向父組件city.vue傳值，而後將letter，賦值給this.letter,這個時候city.vue能夠使用這個letter，將值傳給list.vue

 list.vue中

將letter引進來之後，使用watch進行監聽，一旦letter有變化的時候，執行letter（）

 能夠參考其餘文檔

https://www.cnblogs.com/daiwenru/p/6694530.html

https://blog.csdn.net/a15088712506/article/details/78967937