vue3組件通信（傳值、傳方法）總結

一、常用方法匯總

  1. 父->子：

• props
• provide/jnject
• vuex     

  2. 子->父：

• emit
• vuex(nextTick)

  3. 祖->孫：

• provide/inject
• vuex
• props多層傳遞

  4. 孫->祖：

• vuex(nextTick)
• emit多層傳遞

  5. 兄弟組件：

• vuex
• 通過共同的父組件傳遞

  6. 父使用子的值、方法：

• ref   ($children已刪除)
• 子->父

  7. 子使用父的值、方法：

• $parent   (vue2方式：this.$parent, vue3方式：getCurrentInstance().ctx.$parent)
• 父->子

二、注意事項

　　 1. 可以使用 v-if、watch、computed使子組件重新渲染

　　 2. 父子組件生命周期：

　　　　父-created
　　　　子-created
　　　　子-mounted
　　　　父-mounted
　　　　父-onBeforeUnmount
　　　　子-onBeforeUnmount
　　　　子-onUnmounted
　　　　父-onUnmounted

       3. eventBus：官方不建議使用，vue3不能使用原生的，只能用mitt等外部庫代替