建站
咨詢
售后
建站咨詢
新聞中心
本指南假定你已經(jīng)閱讀了 Provide / Inject、組合式 API 介紹和響應(yīng)性基礎(chǔ)。如果你不熟悉組合式 API，請先閱讀這篇文章。
創(chuàng)新互聯(lián)是一家專業(yè)從事網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷、微信平臺小程序開發(fā)、網(wǎng)站運營為一體的建站企業(yè)；在網(wǎng)站建設(shè)告別千篇一律，告別似曾相識，這一次我們重新定義網(wǎng)站建設(shè)，讓您的網(wǎng)站別具一格。響應(yīng)式網(wǎng)站，實現(xiàn)全網(wǎng)營銷！一站適應(yīng)多終端，一樣的建站，不一樣的體驗！
我們也可以在組合式 API 中使用 provide/inject。兩者都只能在當(dāng)前活動實例的 setup() 期間調(diào)用。
#設(shè)想場景
假設(shè)我們要重寫以下代碼，其中包含一個 MyMap 組件，該組件使用組合式 API 為 MyMarker 組件提供用戶的位置。
#使用 Provide
在 setup() 中使用 provide 時，我們首先從 vue 顯式導(dǎo)入 provide 方法。這使我們能夠調(diào)用 provide 時來定義每個 property。
provide 函數(shù)允許你通過兩個參數(shù)定義 property：
- property 的 name (
- property 的 value
使用 MyMap 組件，我們提供的值可以按如下方式重構(gòu)：
#使用注入
在 setup() 中使用 inject 時，還需要從 vue 顯式導(dǎo)入它。一旦我們這樣做了，我們就可以調(diào)用它來定義如何將它暴露給我們的組件。
inject 函數(shù)有兩個參數(shù)：
- 要注入的 property 的名稱
- 一個默認(rèn)的值 (可選)
使用 MyMarker 組件，可以使用以下代碼對其進行重構(gòu)：
#響應(yīng)性
#添加響應(yīng)性
為了增加提供值和注入值之間的響應(yīng)性，我們可以在提供值時使用 ref 或 reactive。
使用 MyMap 組件，我們的代碼可以更新如下：
現(xiàn)在，如果這兩個 property 中有任何更改，MyMarker 組件也將自動更新！
#修改響應(yīng)式 property
當(dāng)使用響應(yīng)式提供/注入值時，建議盡可能，在*提供者*內(nèi)保持響應(yīng)式 property 的任何更改。
例如，在需要更改用戶位置的情況下，我們最好在 MyMap 組件中執(zhí)行此操作。
然而，有時我們需要在注入數(shù)據(jù)的組件內(nèi)部更新注入的數(shù)據(jù)。在這種情況下，我們建議提供一個方法來負(fù)責(zé)改變響應(yīng)式 property。
最后，如果要確保通過 provide 傳遞的數(shù)據(jù)不會被注入的組件更改，我們建議對提供者的 property 使用 readonly。
網(wǎng)頁名稱：創(chuàng)新互聯(lián)VUE3教程：Vue3.0組合式API提供/注入
轉(zhuǎn)載來源：http://www.5511xx.com/article/dhiesog.html
