$attrs
$attrs 用于多层次组件传递参数(组件标签的attribute,class和style除外),爷爷辈组件向孙子辈组件传递参数(注:参数不能被父辈prop识别,一旦被父辈prop识别且获取,则孙子辈组件不能获取到该参数)
写法如下:(注:v-bind不能用简写 :
)
下面举个栗子:
爷爷(GrandFather)向父亲(Father)传递一个 msg1
向孙子(GrandSon)传递一个 msg2
,孙子会一并接收 msg1
(然而被父亲接走了,所以孙子收不到 msg1
)
GrandFather:
Father: {{ msg1 }}
GrandSon: {{ msg1 }}{{ msg2 }}
界面现实结果:
GrandFather:
Father: msg1
GrandSon: msg2
$listeners
$listeners 用于多层次组件传递事件监听器,爷爷辈组件向父辈、孙子辈、曾孙子辈……组件传递事件(与 $attrs 不同,不存在半路被拦截的情况)
写法如下:(注:v-on 不能用简写 @
,虽然不报错,但是也不生效)
下面继续使用 爷爷-> 父亲 -> 孙子 的栗子:
爷爷(GrandFather)给父亲(Father)绑定一个 click
事件
父亲通过点击 div 触发 click
事件,同时向孙子(GrandSon)传递 $listeners
GrandFather:
Father: {{ msg1 }}
GrandSon: {{ msg1 }}{{ msg2 }}
界面:
GrandFather:
Father: msg1
GrandSon: msg2
点击 Father: msg1
,控制台显示:
father click
trriger click
点击 GrandSon: msg2
,控制台显示:
grandson click
trriger click