Vue--组件通信--父子/隔代/无关联组件

落日映苍穹つ 2023-10-01 12:18 1阅读 0赞

原文网址：[Vue--组件通信--父子/隔代/无关联组件\_IT利刃出鞘的博客-CSDN博客][Vue--_--_IT_-CSDN]

## 简介 ##

本文介绍Vue组件通信的方案。包括：

1.  父子组件
    
    1.  父组件传值给子组件
    2.  子组件传值给父组件
2.  隔代组件
    
    1.  父组件传值给孙组件
    2.  孙组件传值给父组件
3.  无关联组件

## 父子组件 ##

### 父组件传值给子组件 ###

**方案1：props（推荐）**

见：[Vue--props--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--props--_IT_-CSDN]

**方案2：$parent（不推荐）**

见：[Vue--$ref, $parent, $children--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_ref_ _parent_ _children--_IT_-CSDN]

### 子组件传值给父组件 ###

见：[Vue--组件通信--子组件向父组件传值--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_--_--_IT_-CSDN]

## 隔代组件 ##

### 父组件传值给孙组件 ###

**方案1：$attrs**

见：[Vue--$attrs, $listener--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_attrs_ _listener--_IT_-CSDN]

**方案2：provode，inject**

见：[Vue--provide, inject--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--provide_ inject--_IT_-CSDN]

### 孙组件传值给父组件 ###

**方案1：$listeners**

见：[Vue--$attrs, $listener--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_attrs_ _listener--_IT_-CSDN]

## 无关联组件 ##

**方案1：Vuex**

[Vue--插件--Vuex--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_--Vuex--_IT_-CSDN]

**方案2：事件总线（EventBus）**

[Vue--事件总线(EventBus)--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_EventBus_--_IT_-CSDN]

[Vue--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122391807
[Vue--props--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122391884
[Vue--_ref_ _parent_ _children--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122390416
[Vue--_--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121186674
[Vue--_attrs_ _listener--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122374490
[Vue--provide_ inject--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122384773
[Vue--_--Vuex--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/111305412
[Vue--_EventBus_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/111189235