关于|关于 vue2.x 的 $attrs 和 $listeners

2022-03-10

$attrs $attrs 用于多层次组件传递参数（组件标签的attribute，class和style除外），爷爷辈组件向孙子辈组件传递参数（注：参数不能被父辈prop识别，一旦被父辈prop识别且获取，则孙子辈组件不能获取到该参数）
【关于|关于 vue2.x 的 $attrs 和 $listeners】写法如下：（注：v-bind不能用简写 :）

下面举个栗子：
爷爷（GrandFather）向父亲（Father）传递一个 msg1
向孙子（GrandSon）传递一个 msg2，孙子会一并接收 msg1（然而被父亲接走了，所以孙子收不到 msg1）

界面现实结果：

GrandFather: Father: msg1 GrandSon: msg2

$listeners $listeners 用于多层次组件传递事件监听器，爷爷辈组件向父辈、孙子辈、曾孙子辈……组件传递事件（与 $attrs 不同，不存在半路被拦截的情况）
写法如下：（注：v-on 不能用简写 @，虽然不报错，但是也不生效）

下面继续使用爷爷-> 父亲 -> 孙子的栗子：
爷爷（GrandFather）给父亲（Father）绑定一个 click 事件
父亲通过点击 div 触发 click 事件，同时向孙子（GrandSon）传递 $listeners

界面：

GrandFather: Father: msg1 GrandSon: msg2

点击 Father: msg1，控制台显示：

father click trriger click

点击 GrandSon: msg2，控制台显示：

grandson click trriger click

推荐阅读

上一篇：8.Flink实时项目之CEP计算访客跳出

下一篇：06-CircuitBreaker断路器