深入探讨vue组件间的传值的几种方式

vue组件间传值的类型主要分为以下几种：

1. 通过props传递，应用于父传子

• 在Father.vue里：
  
• 在Child.vue里：
  
• 展示效果：
  

2. 通过$emit传递，应用于子传父

• 在Child.vue里：
  
• Father.vue里：
  
• 效果展示：
  

3. 使用Bus发布订阅模式，应用于子传父或者任意的非父子组件，必须通过事件来触发

• 在Home.vue里:
  
• 在Bus.js里:
  
• 在Brother.vue里：
  
• 在Brother2.vue里：
  
• 展示效果：
  

4. vuex传值，适用于任何组件

• 在store/index.js里：
  
• 在store/mudules/event.js中：
  
• 在Home.vue中：
  
• 在Brother.vue中：
  
• 在Brother2.vue中，使用this.$store.state.event.data，或者使用mapState：
  
• 展示效果：
  

5. 使用$parent传值，应用于父子组件

• 在Home.vue中：
  
• 在Father.vue中：
  
• 在Child.vue中：
  
• 展示效果：
  

6. 使用$children, 用于父子组件

• 在Home.vue中：
  
• 在Father.vue中：
  
• 在Child.vue中：
  
• 展示效果：
  

7. 使用ref传值，适用于父子组件

• 在Home.vue中：
  
• 在Father.vue中：
  
• 在child.vue中：
  
• 展示效果：
  

8. 使用provide/inject传值，用于跨级组件，也可以使用父子组件

• 在Home.vue中：
  
• 在Father.vue中：
  
• 在Child.vue中：
  
• 在Sun.vue中：
  
• 展示效果：