简单聊聊vue2.x的$attrs和$listeners
目录
- $attrs
- $listeners
- 总结
$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,控制台显示:
Father: msg1
GrandSon: msg2
father click
trriger click
点击 GrandSon: msg2,控制台显示:
grandson click
trriger click
总结 【简单聊聊vue2.x的$attrs和$listeners】到此这篇关于vue2.x的$attrs和$listeners的文章就介绍到这了,更多相关vue2.x $attrs和$listeners内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- c语言|C语言入门——取余运算
- 关于|关于 vue2.x 的 $attrs 和 $listeners
- js实现简单的抽奖系统
- 聊天机器人的代码实现java,Java网络编程: 实现简单聊天机器人
- Java聊天机器人的简单实现
- JavaScript|JavaScript DOM实现简单留言板
- JavaScript实现简单版的留言发布与删除
- 【有奖调研】来,聊聊TTS音色定制这件事儿
- python实现简单俄罗斯方块游戏
- 大数据|升级版NanoDet-Plus来了!简单辅助模块加速训练收敛,精度大幅提升!