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中:
- 展示效果: