在 Vue2 中，大多數外掛程式將屬性注入到 this 上。例如可以透過 this.$router 存取 Vue 路由器。
但是，setup() 方法不再包含對 this 的相同參考。進行這種更改的主要原因是增加了對 Typescript 的支援。
那麼在 Vue3 中該如何存取我們的外掛呢?可以用 provide 和 inject 來幫助我們在 Vue 程式中註入依賴項。 Provide/inject 用於依賴項注入，可讓我們在 Vue 程式的根目錄中提供插件，並且然後將其註入子元件中。
在 Composition API 中，只能在 setup() 方法期間呼叫這兩種方法。
我們需要某種鍵來辨識依賴關係， Javascript 的 Symbol 可以複合這個要求。
然後 provide 方法會將我們的 Symbol 與某個值相關聯，而 inject 方法會用相同的 Symbol 檢索這個值。
下面是一個範例：
import { provide, inject } from 'vue' const LoggedInSymbol = Symbol() const ParentComponent = { setup() { provide(LoggedInSymbol, true) } } const DeepDescendent = { setup() { // 第二个可选参数是默认值（如果不存在） const isLoggedIn = inject(LoggedInSymbol, false) return { isLoggedIn } } }Vue3 透過這個模式可以實現一些很實用的技巧。
如果我們想在全域作用域中提供一些東西，可以在宣告我們的 VUE 實例的時候使用 app.provide。然後可以用相同的方式進行注入。
main.jsimport { createApp } from 'vue' import App from './App.vue' const app = createApp(App) const ThemeSymbol = Symbol() app.provide(ThemeSymbol, 'dark') app.mount('#app')如果我們希望將響應式資料傳遞給子元件，這也非常方便。只需要用 ref() 傳遞我們方法的一個響應式的屬性。
// 生产者r (父组件) const LoggedInSymbol = Symbol() const loggedIn = ref('true') provide(LoggedInSymbol, loggedIn) // 消费者 (子组件) const theme = inject(LoggedInSymbol, ref('false'))實際上設計插件與我們剛才看到的簡單範例非常相似。
但是我們不想使用單一值，而是要使用組合函數。這是 Vue3 的一個巨大優勢 —— 能夠根據函數組織和提取程式碼。
由於我們的程式碼無論如何都應該用有組織的組合函數來寫，所以只需要建立這些 provide 和 inject 方法就能夠寫出一個外掛程式。
先簡單的看一下 Vue3 Composition API 文件中提供的外掛範例。
Plugin.jsconst StoreSymbol = Symbol() export function provideStore(store) { provide(StoreSymbol, store) } export function useStore() { const store = inject(StoreSymbol) if (!store) { // throw error, no store provided } return store }在實際的元件中會這樣使用：
// 在组件根目录提供 store // const App = { setup() { provideStore(store) } } const Child = { setup() { const store = useStore() // use the store } }根據上述程式碼，在某些根元件中，我們提供了插件，並向其傳遞了元件函數。然後無論想在哪裡使用都必須將其註入到我們的組件中。
元件永遠不必真正進行 provide/inject 調用，而只需調用插件公開的 provideStore/useStore 方法即可。
簡單的來說是：能。如果多說一點，那就是取決於你自己的想法。
可以繼續使用 Options API，並且對 this 的引用方式與以前相同，並且所有舊插件的工作方式都不變。
但是遷移到 Vue3 並利用其所有功能覺得是值得的。
只要你想用 Vue2 的 Options API，你的外掛就可以正常運作。但是，許多維護良好的插件或程式庫都應該添加對 Vue3 的支援。
以上是如何用Provide和Inject做Vue3插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
