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

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

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

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

provide()提供

為后代組件提供數(shù)據(jù)

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

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

應(yīng)用層的provide()

傳遞的數(shù)據(jù)，整個(gè)實(shí)例的組件都能使用。

例如：

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

Inject()注入

用來接收provide傳遞過來的數(shù)據(jù)

參數(shù)是注入名，也就是key。

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

如果提供的值是一個(gè) ref，注入進(jìn)來的會是該 ref 對象，不會自動解包為其內(nèi)部的值，具有響應(yīng)式。

注入默認(rèn)值

就是key可能并沒有任何父組件提供，而卻注入此時(shí)就會發(fā)生錯(cuò)誤，這個(gè)時(shí)候可以設(shè)置一個(gè)默認(rèn)值。

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

和響應(yīng)式數(shù)據(jù)配合使用

意思是加入注入組件想操作注入的數(shù)據(jù)的時(shí)候，盡可能的使其操作在父組件內(nèi)，這樣聲明和變更操作都在父組件內(nèi)，更容易維護(hù)。

<!-- 在父組件內(nèi) --> <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>// 點(diǎn)擊事件修改<button @click="updateLocation">{{ location }}</button> </template>

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

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

使用Symbol作為注入名

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

例如：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。