打赏

vue inheritAttrs、$attrs和$listeners使用

inheritAttrs、$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传递。

最终祖父组件收到孙组件的事件了。

 

 

 

2020--06-18更新:

在封装组件时非常有用:

<!-- 子组件 -->
<template>
  <div class="" >
    <Button v-bind="$attrs" v-on="$listeners">
      <slot />
    </Button>
    <span>test</span>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  components: {},
  data() {
    return {};
  }
};
</script>
<style scoped>
</style>

 

父组件:

<Test type='primary' @click="ss">2345</Test>

 

posted @ 2018-11-21 15:39  孟繁贵  阅读(6375)  评论(0编辑  收藏  举报
TOP