可以向孙子组件透传 props 而不必一级一级的传递。

Demo

App.vue(顶级组件)

<template>
  <div id="app">
    <p>App Component</p>
    <BComponent msg="来自App组件的数据"/>
  </div>
</template>

<script>
import BComponent from './components/BComponent.vue'

export default {
  components: {
    BComponent
  }
}
</script>

BComponent.vue(注意这里没有写 msg 的 props 声明,也不能写,如果写了则无法使用 $attrs 将该 prop 传给后代)

<template>
  <div>
    <p>B Component</p>
    <CComponent v-bind="$attrs"/>
  </div>
</template>

<script>
import CComponent from './CComponent';
export default {
  components: {
    CComponent
  }
};
</script>

CComponent.vue

<template>
  <div>
    <p>C component</p>
    <h1>{{msg}}</h1>
  </div>

</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: 'test'
    }
  }
};
</script>

官方文档

vm.attrs(opens new window) :包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (classstyle 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (classstyle 除外),并且可以通过 v-bind="attrs" 传入内部组件——在创建高级别的组件时非常有用。

vm.listeners(opens new window) :包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="listeners" 传入内部组件——在创建更高层次的组件时非常有用。