vue3组件通信(传值、传方法)总结
一、常用方法汇总
1. 父->子:
- props
- provide/jnject
- vuex
2. 子->父:
- emit
- vuex(nextTick)
3. 祖->孙:
- provide/inject
- vuex
- props多层传递
4. 孙->祖:
- vuex(nextTick)
- emit多层传递
5. 兄弟组件:
- vuex
- 通过共同的父组件传递
6. 父使用子的值、方法:
- ref (通过ref访问子组件,$children已删除)
- 子->父
7. 子使用父的值、方法:
- $parent (vue2方式:this.$parent, vue3方式:getCurrentInstance().proxy.$parent)
- 父->子
二、注意事项
1. 可以使用 v-if、watch、computed使子组件重新渲染
2. 父子组件生命周期:
父-created
子-created
子-mounted
父-mounted
父-onBeforeUnmount
子-onBeforeUnmount
子-onUnmounted
父-onUnmounted
3. eventBus:官方不建议使用,也可以使用mitt等外部库代替;