日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
8種vue組件通信方式詳細解析實例

對于vue來說，組件是非常常見的，有很多平臺都封裝了了屬于自己一套的組件，如element ui、we ui等等。同時組件之間的消息傳遞也是非常重要的，下面是我對組件之間消息傳遞的各種方式的總結(jié)，共有8種方式。如有不足之處，可以留言補充，互相學(xué)習(xí)。

我們提供的服務(wù)有：網(wǎng)站制作、成都網(wǎng)站設(shè)計、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、壽光ssl等。為上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的壽光網(wǎng)站制作公司

1. props和$emit

這是最最常用的父子組件通信方式，父組件向子組件傳遞數(shù)據(jù)是通過prop傳遞的，子組件傳遞數(shù)據(jù)給父組件是通過$emit觸發(fā)事件來做到的。 實例：

父組件

 
 
 
 
    
  
  
  
  
  1. Vue.component('parent',{ 
    2. 
  
  
  
  
  2.  template:` 
    3. 
  
  
  
  
  3.  
     
    4. 
  
  
  
  
  4.  
    父組件
     
    5. 
  
  
  
  
  5.   
    6. 
  
  
  
  
  6.  
 
  •  `, 
  •  data(){ 
  •  return { 
  •  message:'Hello web秀' 
  •  } 
  •  }, 
  •  methods:{ 
  •  //執(zhí)行子組件觸發(fā)的事件 
  •  getChildData(val){ 
  •  console.log(val) 
  •  } 
  •  } 
  • }) 
  • var app=new Vue({ 
  •  el:'#app', 
  •  template:` 
  •  
     
  •   
  •  
    •  
  •  ` 
  • }) 

    • 子組件

     
 
 
 
      
  
  
  
  
    1. Vue.component('child',{ 
      2. 
  
  
  
  
    2.  //得到父組件傳遞過來的數(shù)據(jù) 
      3. 
  
  
  
  
    3.  props:['message'], 
      4. 
  
  
  
  
    4.  data(){ 
      5. 
  
  
  
  
    5.  return { 
      6. 
  
  
  
  
    6.  myMessage: this.message 
      7. 
  
  
  
  
    7.  } 
      8. 
  
  
  
  
    8.  }, 
      9. 
  
  
  
  
    9.  template:` 
      10. 
  
  
  
  
    10.  
       
      11. 
  
  
  
  
    11.    
      12. 
  
  
  
  
    12.  
     
  •  `, 
  •  methods:{ 
  •  passData(val){ 
  •  //觸發(fā)父組件中的事件 
  •  this.$emit('getChildData',val) 
  •  } 
  •  } 
  • }) 

    • 解析：

    • 父組件傳遞了message數(shù)據(jù)給子組件，并且通過v-on綁定了一個getChildData事件來監(jiān)聽子組件的觸發(fā)事件;
    • 子組件通過props得到相關(guān)的message數(shù)據(jù),***通過this.$emit觸發(fā)了getChildData事件。

    2. $attrs和$listeners

    ***種方式處理父子組件之間的數(shù)據(jù)傳輸有一個問題：如果多層嵌套，父組件A下面有子組件B，組件B下面有組件C,這時如果組件A想傳遞數(shù)據(jù)給組件C怎么辦呢?

    如果采用***種方法，我們必須讓組件A通過prop傳遞消息給組件B，組件B在通過prop傳遞消息給組件C;要是組件A和組件C之間有更多的組件，那采用這種方式就很復(fù)雜了。從Vue 2.4開始，提供了$attrs和$listeners來解決這個問題，能夠讓組件A之間傳遞消息給組件C。

    C組件

     
 
 
 
      
  
  
  
  
    1. Vue.component('C',{ 
      2. 
  
  
  
  
    2.  template:` 
      3. 
  
  
  
  
    3.  
       
      4. 
  
  
  
  
    4.   
      5. 
  
  
  
  
    5.  
     
  •  `, 
  •  methods:{ 
  •  passCData(val){ 
  •  //觸發(fā)父組件A中的事件 
  •  this.$emit('getCData',val) 
  •  } 
  •  } 
  • }) 

    • B組件

     
 
 
 
      
  
  
  
  
    1. Vue.component('B',{ 
      2. 
  
  
  
  
    2.  data(){ 
      3. 
  
  
  
  
    3.  return { 
      4. 
  
  
  
  
    4.  myMessage:this.message 
      5. 
  
  
  
  
    5.  } 
      6. 
  
  
  
  
    6.  }, 
      7. 
  
  
  
  
    7.  template:` 
      8. 
  
  
  
  
    8.  
       
      9. 
  
  
  
  
    9.   
      10. 
  
  
  
  
    10.   
      11. 
  
  
  
  
    11.  
     
  •  `, 
  •  //得到父組件傳遞過來的數(shù)據(jù) 
  •  props:['message'], 
  •  methods:{ 
  •  passData(val){ 
  •  //觸發(fā)父組件中的事件 
  •  this.$emit('getChildData',val) 
  •  } 
  •  } 
  • }) 

    • A組件

     
 
 
 
      
  
  
  
  
    1. Vue.component('A',{ 
      2. 
  
  
  
  
    2.  template:` 
      3. 
  
  
  
  
    3.  
       
      4. 
  
  
  
  
    4.  
      this is parent compoent!
       
      5. 
  
  
  
  
    5.  
  
  
  
  
    6.  :messageC="messageC"  
      7. 
  
  
  
  
    7.  :message="message"  
      8. 
  
  
  
  
    8.  v-on:getCData="getCData"  
      9. 
  
  
  
  
    9.  v-on:getChildData="getChildData(message)"> 
      10. 
  
  
  
  
    10.   
      11. 
  
  
  
  
    11.  
     
  •  `, 
  •  data(){ 
  •  return { 
  •  message:'Hello', 
  •  messageC:'Hello c' 
  •  } 
  •  }, 
  •  methods:{ 
  •  getChildData(val){ 
  •  console.log('這是來自B組件的數(shù)據(jù)') 
  •  }, 
  •  //執(zhí)行C子組件觸發(fā)的事件 
  •  getCData(val){ 
  •  console.log("這是來自C組件的數(shù)據(jù)："+val) 
  •  } 
  •  } 
  • }) 
  • var app=new Vue({ 
  •  el:'#app', 
  •  template:` 
  •  
     
  •   
  •  
    •  
  •  ` 
  • }) 

    • 解析：

    • C組件中能直接觸發(fā)getCData的原因在于 B組件調(diào)用C組件時 使用 v-on 綁定了$listeners 屬性
    • 通過v-bind 綁定$attrs屬性，C組件可以直接獲取到A組件中傳遞下來的props(除了B組件中props聲明的)

    3. v-model

    父組件通過v-model傳遞值給子組件時，會自動傳遞一個value的prop屬性，在子組件中通過this.$emit(‘input',val)自動修改v-model綁定的值

    子組件

     
 
 
 
      
  
  
  
  
    1. Vue.component('child',{ 
      2. 
  
  
  
  
    2.  props:{ 
      3. 
  
  
  
  
    3.  //v-model會自動傳遞一個字段為value的prop屬性 
      4. 
  
  
  
  
    4.  value: String,  
      5. 
  
  
  
  
    5.  }, 
      6. 
  
  
  
  
    6.  data(){ 
      7. 
  
  
  
  
    7.  return { 
      8. 
  
  
  
  
    8.  myMessage:this.value 
      9. 
  
  
  
  
    9.  } 
      10. 
  
  
  
  
    10.  }, 
      11. 
  
  
  
  
    11.  methods:{ 
      12. 
  
  
  
  
    12.  changeValue(){ 
      13. 
  
  
  
  
    13.  //通過如此調(diào)用可以改變父組件上v-model綁定的值 
      14. 
  
  
  
  
    14.  this.$emit('input',this.myMessage); 
      15. 
  
  
  
  
    15.  } 
      16. 
  
  
  
  
    16.  }, 
      17. 
  
  
  
  
    17.  template:` 
      18. 
  
  
  
  
    18.  
       
      19. 
  
  
  
  
    19.  
  
  
  
  
    20.  type="text"  
      21. 
  
  
  
  
    21.  v-model="myMessage"  
      22. 
  
  
  
  
    22.  @change="changeValue"> 
      23. 
  
  
  
  
    23.  
     
  •  ` 
  • }) 

    • 父組件

     
 
 
 
      
  
  
  
  
    1. Vue.component('parent',{ 
      2. 
  
  
  
  
    2.  template:` 
      3. 
  
  
  
  
    3.  
       
      4. 
  
  
  
  
    4.  
      this is parent compoent!
       
      5. 
  
  
  
  
    5.  
      {{message}}
       
      6. 
  
  
  
  
    6.   
      7. 
  
  
  
  
    7.  
     
  •  `, 
  •  data(){ 
  •  return { 
  •  message:'Hello' 
  •  } 
  •  } 
  • }) 
  • var app=new Vue({ 
  •  el:'#app', 
  •  template:` 
  •  
     
  •   
  •  
    •  
  •  ` 
  • }) 

    • 4. provide和inject

    父組件中通過provider來提供變量，然后在子組件中通過inject來注入變量。不論子組件有多深，只要調(diào)用了inject那么就可以注入provider中的數(shù)據(jù)。而不是局限于只能從當(dāng)前父組件的prop屬性來獲取數(shù)據(jù)，只要在父組件的生命周期內(nèi)，子組件都可以調(diào)用。

    子組件

     
 
 
 
      
  
  
  
  
    1. Vue.component('child',{ 
      2. 
  
  
  
  
    2.  inject:['for'],//得到父組件傳遞過來的數(shù)據(jù) 
      3. 
  
  
  
  
    3.  data(){ 
      4. 
  
  
  
  
    4.  return { 
      5. 
  
  
  
  
    5.  myMessage: this.for 
      6. 
  
  
  
  
    6.  } 
      7. 
  
  
  
  
    7.  }, 
      8. 
  
  
  
  
    8.  template:` 
      9. 
  
  
  
  
    9.  
       
      10. 
  
  
  
  
    10.   
      11. 
  
  
  
  
    11.  
     
  •  ` 
  • }) 

    • 父組件

     
 
 
 
      
  
  
  
  
    1. Vue.component('parent',{ 
      2. 
  
  
  
  
    2.  template:` 
      3. 
  
  
  
  
    3.  
       
      4. 
  
  
  
  
    4.  
      this is parent compoent!
       
      5. 
  
  
  
  
    5.   
      6. 
  
  
  
  
    6.  
     
  •  `, 
  •  provide:{ 
  •  for:'test' 
  •  }, 
  •  data(){ 
  •  return { 
  •  message:'Hello' 
  •  } 
  •  } 
  • }) 
  • var app=new Vue({ 
  •  el:'#app', 
  •  template:` 
  •  
     
  •   
  •   
  •  ` 
  • }) 

    • 5. 中央事件總線

    上面方式都是處理的父子組件之間的數(shù)據(jù)傳遞，那如果兩個組件不是父子關(guān)系呢?也就是兄弟組件如何通信?

    這種情況下可以使用中央事件總線的方式。新建一個Vue事件bus對象，然后通過bus.$emit觸發(fā)事件，bus.$on監(jiān)聽觸發(fā)的事件。

     
 
 
 
      
  
  
  
  
    1. Vue.component('brother1',{ 
      2. 
  
  
  
  
    2.  data(){ 
      3. 
  
  
  
  
    3.  return { 
      4. 
  
  
  
  
    4.  myMessage:'Hello brother1' 
      5. 
  
  
  
  
    5.  } 
      6. 
  
  
  
  
    6.  }, 
      7. 
  
  
  
  
    7.  template:` 
      8. 
  
  
  
  
    8.  
       
      9. 
  
  
  
  
    9.  
      this is brother1 compoent!
       
      10. 
  
  
  
  
    10.   
      11. 
  
  
  
  
    11.   
      12. 
  
  
  
  
    12.  `, 
      13. 
  
  
  
  
    13.  methods:{ 
      14. 
  
  
  
  
    14.  passData(val){ 
      15. 
  
  
  
  
    15.  //觸發(fā)全局事件globalEvent 
      16. 
  
  
  
  
    16.  bus.$emit('globalEvent',val) 
      17. 
  
  
  
  
    17.  } 
      18. 
  
  
  
  
    18.  } 
      19. 
  
  
  
  
    19. }) 
      20. 
  
  
  
  
    20. Vue.component('brother2',{ 
      21. 
  
  
  
  
    21.  template:` 
      22. 
  
  
  
  
    22.  
       
      23. 
  
  
  
  
    23.  
      this is brother2 compoent!
       
      24. 
  
  
  
  
    24.  
      brother1傳遞過來的數(shù)據(jù)：{{brothermessage}}
       
      25. 
  
  
  
  
    25.   
      26. 
  
  
  
  
    26.  `, 
      27. 
  
  
  
  
    27.  data(){ 
      28. 
  
  
  
  
    28.  return { 
      29. 
  
  
  
  
    29.  myMessage:'Hello brother2', 
      30. 
  
  
  
  
    30.  brothermessage:'' 
      31. 
  
  
  
  
    31.  } 
      32. 
  
  
  
  
    32.  }, 
      33. 
  
  
  
  
    33.  mounted(){ 
      34. 
  
  
  
  
    34.  //綁定全局事件globalEvent 
      35. 
  
  
  
  
    35.  bus.$on('globalEvent',(val)=>{ 
      36. 
  
  
  
  
    36.  this.brothermessage=val; 
      37. 
  
  
  
  
    37.  }) 
      38. 
  
  
  
  
    38.  } 
      39. 
  
  
  
  
    39. }) 
      40. 
  
  
  
  
    40. //中央事件總線 
      41. 
  
  
  
  
    41. var bus=new Vue(); 
      42. 
  
  
  
  
    42. var app=new Vue({ 
      43. 
  
  
  
  
    43.  el:'#app', 
      44. 
  
  
  
  
    44.  template:` 
      45. 
  
  
  
  
    45.  
       
      46. 
  
  
  
  
    46.   
      47. 
  
  
  
  
    47.   
      48. 
  
  
  
  
    48.   
      49. 
  
  
  
  
    49.  ` 
      50. 
  
  
  
  
    50. }) 
      51.

    6. parent和children

     
 
 
 
      
  
  
  
  
    1. Vue.component('child',{ 
      2. 
  
  
  
  
    2.     props:{ 
      3. 
  
  
  
  
    3.       value:String, //v-model會自動傳遞一個字段為value的prop屬性 
      4. 
  
  
  
  
    4.     }, 
      5. 
  
  
  
  
    5.     data(){ 
      6. 
  
  
  
  
    6.       return { 
      7. 
  
  
  
  
    7.         mymessage:this.value 
      8. 
  
  
  
  
    8.       } 
      9. 
  
  
  
  
    9.     }, 
      10. 
  
  
  
  
    10.     methods:{ 
      11. 
  
  
  
  
    11.       changeValue(){ 
      12. 
  
  
  
  
    12.         this.$parent.message = this.mymessage;//通過如此調(diào)用可以改變父組件的值 
      13. 
  
  
  
  
    13.       } 
      14. 
  
  
  
  
    14.     }, 
      15. 
  
  
  
  
    15.     template:` 
      16. 
  
  
  
  
    16.       
       
      17. 
  
  
  
  
    17.          
      18. 
  
  
  
  
    18.        
      19. 
  
  
  
  
    19.   }) 
      20. 
  
  
  
  
    20.   Vue.component('parent',{ 
      21. 
  
  
  
  
    21.     template:` 
      22. 
  
  
  
  
    22.       
       
      23. 
  
  
  
  
    23.         
      this is parent compoent!
       
      24. 
  
  
  
  
    24.         test 
      25. 
  
  
  
  
    25.          
      26. 
  
  
  
  
    26.        
      27. 
  
  
  
  
    27.     `, 
      28. 
  
  
  
  
    28.     methods:{ 
      29. 
  
  
  
  
    29.       changeChildValue(){ 
      30. 
  
  
  
  
    30.         this.$children[0].mymessage = 'hello'; 
      31. 
  
  
  
  
    31.       }//在此我向大家推薦一個前端全棧開發(fā)交流圈：619586920 突破技術(shù)瓶頸，提升思維能力 
      32. 
  
  
  
  
    32.     }, 
      33. 
  
  
  
  
    33.     data(){ 
      34. 
  
  
  
  
    34.       return { 
      35. 
  
  
  
  
    35.         message:'hello' 
      36. 
  
  
  
  
    36.       } 
      37. 
  
  
  
  
    37.     } 
      38. 
  
  
  
  
    38.   }) 
      39. 
  
  
  
  
    39.   var app=new Vue({ 
      40. 
  
  
  
  
    40.     el:'#app', 
      41. 
  
  
  
  
    41.     template:` 
      42. 
  
  
  
  
    42.       
       
      43. 
  
  
  
  
    43.          
      44. 
  
  
  
  
    44.        
      45. 
  
  
  
  
    45.     ` 
      46. 
  
  
  
  
    46.   }) 
      47.

    7. boradcast和dispatch

    vue1.0中提供了這種方式，但vue2.0中沒有，但很多開源軟件都自己封裝了這種方式，比如min ui、element ui和iview等。 比如如下代碼，一般都作為一個mixins去使用, broadcast是向特定的父組件，觸發(fā)事件，dispatch是向特定的子組件觸發(fā)事件，本質(zhì)上這種方式還是on和on和emit的封裝，但在一些基礎(chǔ)組件中卻很實用。

     
 
 
 
      
  
  
  
  
    1. function broadcast(componentName, eventName, params) { 
      2. 
  
  
  
  
    2.  this.$children.forEach(child => { 
      3. 
  
  
  
  
    3.  var name = child.$options.componentName; 
      4. 
  
  
  
  
    4.  if (name === componentName) { 
      5. 
  
  
  
  
    5.  child.$emit.apply(child, [eventName].concat(params)); 
      6. 
  
  
  
  
    6.  } else { 
      7. 
  
  
  
  
    7.  broadcast.apply(child, [componentName, eventName].concat(params)); 
      8. 
  
  
  
  
    8.  } 
      9. 
  
  
  
  
    9.  }); 
      10. 
  
  
  
  
    10. } 
      11. 
  
  
  
  
    11. export default { 
      12. 
  
  
  
  
    12.  methods: { 
      13. 
  
  
  
  
    13.  dispatch(componentName, eventName, params) { 
      14. 
  
  
  
  
    14.  var parent = this.$parent; 
      15. 
  
  
  
  
    15.  var name = parent.$options.componentName; 
      16. 
  
  
  
  
    16.  while (parent && (!name || name !== componentName)) { 
      17. 
  
  
  
  
    17.  parentparent = parent.$parent; 
      18. 
  
  
  
  
    18.  if (parent) { 
      19. 
  
  
  
  
    19.  name = parent.$options.componentName; 
      20. 
  
  
  
  
    20.  } 
      21. 
  
  
  
  
    21.  } 
      22. 
  
  
  
  
    22.  if (parent) { 
      23. 
  
  
  
  
    23.  parent.$emit.apply(parent, [eventName].concat(params)); 
      24. 
  
  
  
  
    24.  } 
      25. 
  
  
  
  
    25.  }, 
      26. 
  
  
  
  
    26.  broadcast(componentName, eventName, params) { 
      27. 
  
  
  
  
    27.  broadcast.call(this, componentName, eventName, params); 
      28. 
  
  
  
  
    28.  } 
      29. 
  
  
  
  
    29.  } 
      30. 
  
  
  
  
    30. }; 
      31.

    8. vuex處理組件之間的數(shù)據(jù)交互

    如果業(yè)務(wù)邏輯復(fù)雜，很多組件之間需要同時處理一些公共的數(shù)據(jù)，這個時候才有上面這一些方法可能不利于項目的維護，vuex的做法就是將這一些公共的數(shù)據(jù)抽離出來，然后其他組件就可以對這個公共數(shù)據(jù)進行讀寫操作，這樣達到了解耦的目的。


    標(biāo)題名稱：8種vue組件通信方式詳細解析實例
    轉(zhuǎn)載注明：http://www.dlmjj.cn/article/dpjipsh.html

    其他資訊