在组件 son、grandson 和 great-grandson 中都显示了 this is a sentence,而子组件 son 和孙组件 grandson 中都没有定义 props,说明 parent 组件中的数据正确的传递到了内部组件中。
打开控制台,分别点击组件 grandson 和 great-grandson 中 $attrs 所在的句子,可以看到事件也是生效的:
这就是 $attrs 和 $listeners 的功能,去掉数据和事件在多层嵌套组件中传递时的定义部分。注意,仅仅是定义部分,绑定的步骤还是少不了的,即经过的每一层组件都需要使用 v-bind="$attrs" 和 v-on="$listeners"。
另外,这两个属性都是 只读 的,不要试图通过 $attrs 去直接修改原数据。