Vue2孙向爷组件传递数据或事件

转载已于 2023-02-13 14:25:12 修改 · 960 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/linjiangxian/p/15852746.html

文章标签：

#前端 #javascript #开发语言

于 2023-02-13 14:22:28 首次发布

文章介绍了在Vue.js中如何利用$attrs和$listeners实现祖孙组件间的数据传递和事件监听。$attrs包含未声明为prop的父属性，而$listeners包含不含.native修饰器的v-on事件监听器，两者在构建高层级组件时非常有用。另外，provide和inject则提供了一种方式，允许祖先组件向所有子孙后代深度传递依赖，保持其在整个组件树中的有效性。

方式一. 利用$attrs实现祖孙组件间的数据传递， $listeners实现祖孙组件间的事件监听

$a tt rs 包含了父作用域中不作为 p ro p 被识别 (且获取) 的特性绑定 (c l a ss 和 s t y l e 除外) 。当一个组件没有声明任何 p ro p 时，这里会包含所有父作用域的绑定 (c l a ss 和 s t y l e 除外) ，并且可以通过 v - bin d = "$ attrs" 传入内部组件——在创建高级别的组件时非常有用。
$l i s t e n ers 包含了父作用域中的 (不含 . na t i v e 修饰器的) v - o n 事件监听器。它可以通过 v - o n = "$ listeners" 传入内部组件——在创建更高层次的组件时非常有用。