阅读数:90 评论数:0

一、$attrs

用于多层级组件传递属性。

当父组件传递了很多数据给子组件时，子组件没有声明props来进行接收，那么子组件中的attrs属性就是除开props发声明之外所有父组件传递来的数据。同理，孙组件也可以使用$attrs的的方式获取祖组件的属性。

二、$listeners

用于多层级组件传递事件。

当父组件在子组件上定义了一些自定义的非原生事件时，在子组件内部可以通过$listeners属性获取父组件自定义事件，如果存在多层级组件，亦有效。

<grand-son v-on="$listeners" />

三、inheritAttrs

当父组件传递了很多数据给子组件，子组件的props没有完全接收，那么父组件的这些数据就会渲染到HTML上，我们可以给子组件设置inheritAttrs为false，避免这样的渲染。

四、示例

<!-- GrandFather.vue -->
<template>
  <div>
    GrandFather:
    <father :msg1="msg1" :msg2="msg2" @click="handleClick" />
  </div>
</template>

<script>
import Father from './Father.vue'
export default {
  components: { Father },
  data() {
    return {
      msg1: 'msg1',
      msg2: 'msg2'
    }
  },
  methods: {
    handleClick() {
      console.log('trriger click')
    }
  }
}
</script>

<!-- Father.vue -->
<template>
  <div>
    <div @click="handleFatherClick">Father: {{ msg1 }}</div>
    <grand-son v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

<script>
import GrandSon from './GrandSon.vue'
export default {
  components: { GrandSon },
  props: ['msg1'],
  methods: {
    handleFatherClick() {
      console.log('father click')
      this.$emit('click')
    }
  }
}
</script>
<!-- GrandSon.vue -->
<template>
  <div @click="handleSonClick">GrandSon: {{ msg1 }}{{ msg2 }}</div>
</template>

<script>
export default {
  props: ['msg1', 'msg2'],
  methods: {
    handleSonClick() {
      console.log('grandson click')
      this.$emit('click')
    }
  }
}
</script>