vue2 inheritAttrs、attrs和attrs和listeners使用

inheritAttrs、attrs和attrs和listeners使用場景：

 

組件傳值，尤爲是祖孫組件有跨度的傳值。

 （1）inheritAttrs

屬性說明：https://cn.vuejs.org/v2/api/#inheritAttrs

說明比較晦澀。

組件傳值通常是經過props傳值的。inheritAttrs默認值爲true，true的意思是將父組件中除了props外的屬性添加到子組件的根節點上(說明，即便設置爲true，子組件仍然能夠經過$attr獲取到props意外的屬性)。示例代碼：

grandpaDom.vue：

<template>
   <div>
     <father-dom
      :foo="foo"
      :coo="foo"
      v-on:upRocket="reciveRocket"
     >
     </father-dom>
   </div>
</template>
<script>
   import fatherDom from "./fatherDom.vue";
   export default {
     data() {
        return {
          foo:"Hello, world",
          coo:"Hello,rui"
        }
     },
     components:{fatherDom},
     methods:{
       reciveRocket(){
         window.console.log('火箭發射成功！')
       }
     }
   }
</script>

 

fatherDom.vue：

<template>
   <div>
     <p>------------fatherDom-------------</p>
      <p>attrs:{{$attrs}}</p>
      <p>foo:{{foo}}</p>
      <p>------------fatherDom-------------</p>
      <child-dom v-bind="$attrs" v-on="$listeners"></child-dom>
   </div>
</template>
<script>
import childDom from "./childDom.vue";
export default {
 name:'father-dom',
 props:["foo"],
 components:{childDom},
}
</script>

 

說明：grandpaDom.vue將foo和coo屬性都放在fatherDom.vue上，可是fatherDom.vue的props值接收了foo，所以grandpaDom的coo屬性顯示在了fatherDom的根節點上。即：

 

 

接着將inheritAttrs:false後（請將fatherDom.vue添加inheritAttrs:false），coo屬性就不會顯示在fatherDom根節點上了。可是怎麼獲取到coo呢？

這時就經過$attrs獲取到到coo。

 

接着看孫組件childDom.vue:

 

<template>
  <div>
    <p>------------childDom-------------</p>
    <p>coo:{{coo}}</p>
    <button @click="startUpRocket">我要發射火箭</button>
    <p>------------childDom-------------</p>
  </div>
</template>
<script>
export default {
  name: "childDom",
  props: ["coo"],
  methods: {
    startUpRocket() {
      this.$emit("upRocket");
      window.console.log('我要發射火箭了。')
    }
  }
};
</script>

 

孫組件childDom.vue就能夠經過props接收到coo屬性了。

好，以上是總祖父--父親--兒子向下傳遞值。

那怎麼兒子-父親--祖父傳遞數據呢呢？

 

父親組件使用$listeners傳遞。

最終祖父組件收到孫組件的事件了。

 轉自:https://www.cnblogs.com/mengfangui/category/968713.html