关于 vue2.x 的 $attrs 和 $listeners

$attrs

$attrs 用于多层次组件传递参数(组件标签的attribute,class和style除外),爷爷辈组件向孙子辈组件传递参数(注:参数不能被父辈prop识别,一旦被父辈prop识别且获取,则孙子辈组件不能获取到该参数

写法如下:(注: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

你可能感兴趣的:(关于 vue2.x 的 $attrs 和 $listeners)