隐式贯穿 是一种特殊的编程结构。它由多个相似的有序条件组成，当一个条件执行完成后，除非显式声明跳出结构，否则它将继续执行后面的条件。举几个例子……

switch 语句

每个case中除非显式使用break语句，否则它将继续执行后续的case：

switch (value) {
    case 0:
        // do something
        break
    case 1:
        // do something
    case 2:
        // do something
    default:
        // do something
        break
}

参考 wiki 定义：https://en.wiktionary.org/wiki/fall-through#English

Vue 组件单根节点的属性传递

在 Vue2 中一个组件的字符串模板只能有一个根节点。

一个组件的所有 props 会挂载到$props上，而所有传入的非 prop 属性会挂载到$attrs上。

注意这里我们区分了 prop 和属性：前者是组件定义时显式声明的，后者是使用组件时传入的。

使用组件传入的属性并不是都会被组件的 prop 接收，例如 id, class, style 等，于是就有了 props 和 attrs 的区分。

默认情况下，传递给组件的$attrs会自动绑定到单根节点上，即v-bind="$attrs"。

$attrs除了有数据属性外，还可能有事件监听器，它们也将自动绑定到单根节点上。

这样，如果单根节点本身就定义了该事件的话，就相当于实现了爷爷组件监听孙子组件的事件，不需要儿子组件的转发。

const Son = { template: `<input type="text" name="username">` }

const Father = {
    components: { son: Son },
    template: `<son>`
}

const Grandfather = {
    components: { father: Father },
    template: `<father @change="change">`,
    methods: {
        change(text: string) {
            console.log(text)
        }
    }
}

Grandfather给Father传递了一个事件监听器change，但是Father组件并没有change事件的发起声明（emit）。

change事件处理器挂载到了Father组件的$attrs上，而不是$emits上。

Father组件的单根节点是原生元素input，它已经内置了change事件的处理。

Father组件将$attrs绑定到input组件上，将会自动监听input组件的change事件。

禁用单根节点的属性自动传递

在组件选项中设置inheritAttrs: false禁用单根节点自动继承非 prop 属性的行为。

通过v-bind="$attrs"可以手动将非 prop 属性绑定给其他子节点。

这种自动传递非 prop 属性给单根节点的行为叫做 隐式贯穿 (fall-through)，除非我们显式禁用这种传递，否则它会一直传递下去，直到非 prop 属性被消耗完毕。

vue3 的多根节点不会自动传递

因为不知道传递给哪一个根，如果存在非 prop 属性 vue 将会发出警告，提示处理非空的$attrs。