按照對象分類:
一、父子組件之間的傳值
1.使用props和$emit
2.在引入的子組件中使用ref,通過this.$refs.xxx.方法/值來獲取子組件中的方法或者值
3.子組件中使用this.$parent來獲取父組件中的值或者方法
4.父組件中使用this.$children來獲取子組件中的值或者方法
tip:方法3和方法4有時候會失效,所以建議使用方法2
二、兄弟組件中的傳值
1.使用eventBus作為中間件,然后使用$emit去拋出事件,使用$on去監聽事件
這里要注意一些事項:a.bus.$emit在beforeDestroy中去觸發
b.bus.$on 在 created或者mounted中使用,且回調函數使用箭頭函數,解決this指向問題
c.在beforeDestroy中使用bus.$off去銷毀事件
d.比較特殊的是如果該組件存在緩存(路由跳轉的時候使用了<keep-alive>來包裹<router-view>,此時該組件跳轉的時候是不會觸發beforeDestroy和destroy,該組件只會觸發created和mounted,但是它又離去的時候會觸發deactivated,返回的時候會觸發active,此時就將bus.$emit寫在deactivated中)
tip:我在網上還看到如果是這種情況的話也可以將bus.$emit寫在$nextTick里面去觸發,嘗試過,結果失敗。這里只是當做一個參考。
詳細參考點擊鏈接
三、多級組件嵌套傳值
1.使用 v-bind = "$attrs" v-on = "$listeners"
詳情參考點擊鏈接
2.使用provide和inject
四、多個組件重復使用,整個項目都需要的
1.使用vuex