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等外部库代替;

 

posted @ 2021-08-12 11:25  考拉很OK  阅读(2054)  评论(0编辑  收藏  举报