vue3中的provide/inject(提供注入)

在說provide/inject先說一下prop逐級穿透問題。

通常我們從父組件向子組件傳遞數據時，會用到props。對于只需要傳遞一層或二層時還行，假如需要傳遞多層嵌套的組件，此時一級一級傳遞數據就會很繁瑣，不利于編碼，因此產生了provide/inject，從而解決此類問題。

有了provide/inject不用一級一級傳遞，只要是父組件提供了某個數據，隔代組件就能直接獲取都數據，從而很方便。

provide()提供

為后代組件提供數據

import { provide } from 'vue'; export default {setup() {provide('message', 'hello!');} }

接受兩個參數，第一個參數稱為注入名，也就是key，可以是字符串或者Symbol。第二個參數是值，要傳遞的數據，任意類型的數據。

應用層的provide()

傳遞的數據，整個實例的組件都能使用。

例如：

import { createApp } from 'vue'const app = createApp({})app.provide('message', 'hello!')

Inject()注入

用來接收provide傳遞過來的數據

參數是注入名，也就是key。

<script setup> import { inject } from 'vue'const message = inject('message') </script>

如果提供的值是一個 ref，注入進來的會是該 ref 對象，不會自動解包為其內部的值，具有響應式。

注入默認值

就是key可能并沒有任何父組件提供，而卻注入此時就會發生錯誤，這個時候可以設置一個默認值。

// 如果沒有祖先組件提供 "message" // `value` 會是 "這是默認值" const value = inject('message', '這是默認值')

和響應式數據配合使用

意思是加入注入組件想操作注入的數據的時候，盡可能的使其操作在父組件內，這樣聲明和變更操作都在父組件內，更容易維護。

<!-- 在父組件內 --> <script setup> import { provide, ref } from 'vue'const location = ref('North Pole') // 修改值 function updateLocation() {location.value = 'South Pole' } provide('location', {location,updateLocation }) </script> <!-- 在注入方組件 --> <script setup> import { inject } from 'vue'const { location, updateLocation } = inject('location') </script><template>// 點擊事件修改<button @click="updateLocation">{{ location }}</button> </template>

假如提供的數據不想讓子組件去修改，則可以使用readonly(),這樣后代就不能操作此數據。

<script setup> import { ref, provide, readonly } from 'vue'const count = ref(0) provide('read-only-count', readonly(count)) </script>

使用Symbol作為注入名

如果一個大型項目，有很多的依賴項，可以使用Symbol作為注入名，可以避免注入名沖突。

例如：

// keys.js export const myInjectionKey = Symbol() // 在供給方組件中 import { provide } from 'vue' import { myInjectionKey } from './keys.js'provide(myInjectionKey, { /*要提供的數據 */ }); // 注入方組件 import { inject } from 'vue' import { myInjectionKey } from './keys.js'const injected = inject(myInjectionKey)

總結

以上是生活随笔為你收集整理的vue3中的provide/inject(提供/注入)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。