vue组件通信-创新互联

vue组件通信分为横向和纵向。

创新互联专注于合江网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供合江营销型网站建设，合江网站制作、合江网页设计、合江网站官网定制、微信小程序服务，打造合江网络公司原创品牌,更为您提供合江网站排名全网营销落地服务。

**纵向**

1. props 和 $emit

props：接收来自父组件的数据

$emit：触发事件







Document

子组件向父组件传值
1、自定义事件
2、子组件原生事件
3、原生事件的处理函数中通过$emit触发自定义事件
注：子组件不能修改props中的值，否则报错，可通过子组件自己的数据接收props中的值来解决

2. $parent 和 $children

后代组件可以通过$parent.$parent.$parent这种形式跨级通信

父组件可以通过$children[0].$children[0]这种形式跨级通信，如果有多个子组件，索引不好控制







Document

$parent, $children, $root, $parent.$parent
非响应式，如果有多个直接子组件

3. $attrs 和 $listeners

后代组件从$attrs获取父组件传给后代组件的数据

后代组件通过$emit触发$listeners的事件将数据传给父组件







Document

1、$attrs收集属性
2、$listeners收集事件

4. provide 和 inject

父组件向后代组件单向传递数据







Document

Document