過往 Vue 2.X 的時候,可以使用 this 來取得當下 Vue Instance 的系列資料,如 this.$data,不過在 Vue3 的 Composition API 中,是沒有 this 這樣方便取得 Vue Instance 的方法。這邊可以利用 Vue3 新增的 Provide / Inject 方法來達成一樣的效果。
步驟
1. 在 Vue 的 main.js / ts 檔案中,用 createApp(App).provide(‘名稱’, App) 的方式來讓其他的 component 可以取用。這邊的名稱,就是 inject 呼叫時要用的。後方的第二個參數則是要引入的東西,這邊我們選擇載入 App,也就是底層的 Root 實體。
2. 在任何一個 Vue Components 的 setup() 中,搭配 inject 方法就可以取用了。
參考資料
1. Vue 3 composition API and access to Vue instance
按讚加入粉絲團