爺爺、孫子組件間值的傳遞（Vue2.4中$attrs和$listeners用法）

爺爺組件

<template>
   <div>
     <child-dom
      :foo="foo"
      :coo="coo"
      :goo='goo'
      v-on:upRocket="reciveRocket"
     >
     </child-dom>
   </div>
</template>
<script>
   import childDom from "./child.vue";
   export default {
     data() {
        return {
          foo:"Hello, world",
          coo:"Hello,rui",
          goo:'googoo'
        }
     },
    components:{childDom},
    methods:{
    reciveRocket(e){
        console.log('爺爺組件傳來的值',e)
        console.log("reciveRocket success")
    }
 }
   }
</script>

父組件

<template>
   <div>
      <p>foo:{{foo}}</p>
      <p>attrs:{{$attrs}}</p>
       <grandson v-bind="$attrs" v-on="$listeners"></grandson>
   </div>
</template>
<script>
import grandson from './grandson';
export default {
 name:'child-dom',
 props:[
   "foo",      //父組件不能接收，否則在孫子組件中獲取不到值
  ],
//  inheritAttrs:false,
 components:{grandson},
}
</script>

孫子組件：

<template>
  <div>
   <p>coo:{{coo}}</p>
   <p>{{goo}}</p>
   <button @click="startUpRocket">我要發射火箭</button>
  </div>
</template>
<script>
  export default {
    name:'grandson',
    props:["coo","goo"],
    // inheritAttrs:false,
    methods:{
      startUpRocket(){
        this.$emit("upRocket",'傳值到爺爺組件');
        // console.log("startUpRocket")
      }
    }
  }
</script>

 

首先我們來看下面的一張圖，圖中表示一個多級組件嵌套的情形。

現在我們來討論一種情況，A組件與C組件怎么通信，我們有多少種解決方案？

1. 我們使用VueX來進行數據管理，但是如果項目中多個組件共享狀態比較少，項目比較小，並且全局狀態比較少,那使用VueX來實現該功能，並沒有發揮出VueX的威力。
2. 使用B來做中轉站，當A組件需要把信息傳給C組件時，B接受A組件的信息，然后利用屬性傳給C組件，這是一種解決方案，但是如果嵌套的組件過多，會導致代碼繁瑣，代碼維護比較困難;如果C中狀態的改變需要傳遞給A, 使用事件系統一級級往上傳遞 。本來
3. 自定義一個Vue 中央數據總線，這個情況適合碰到組件跨級傳遞消息，但是使用VueX感覺又有點浪費的項目中，但是缺點是，碰到多人合作時，代碼的維護性較低，代碼可讀性低

在很多開發情況下，我們只是想把A組件的信息傳遞給C組件，如果使用props 綁定來進行信息的傳遞，雖然能夠實現，但是代碼並不美觀。

 

 

轉：https://blog.csdn.net/songxiugongwang/article/details/84001967