Vue 使用依賴注入的方式共享數(shù)據(jù)的過(guò)程
什么是vue依賴注入？
Vue是一個(gè)用于構(gòu)建用戶界面的漸進(jìn)式框架。
它提供了一種簡(jiǎn)單而靈活的方式來(lái)管理組件之間的數(shù)據(jù)流，即依賴注入（Dependency Injection，DI）。
依賴注入是一種設(shè)計(jì)模式，它允許一個(gè)組件從另一個(gè)組件獲取它所依賴的數(shù)據(jù)或服務(wù)，而不需要自己創(chuàng)建或管理它們。這樣可以降低組件之間的耦合度，提高代碼的可維護(hù)性和可測(cè)試性。
依賴注入示意圖
provide和inject
在Vue中，依賴注入的方式是通過(guò)provide和inject兩個(gè)選項(xiàng)來(lái)實(shí)現(xiàn)的。
provide選項(xiàng)允許一個(gè)祖先組件向下提供數(shù)據(jù)或服務(wù)給它的所有后代組件。
inject選項(xiàng)允許一個(gè)后代組件接收來(lái)自祖先組件的數(shù)據(jù)或服務(wù)。
這兩個(gè)選項(xiàng)都可以是一個(gè)對(duì)象或一個(gè)函數(shù)，對(duì)象的鍵是提供或接收的數(shù)據(jù)或服務(wù)的名稱，值是對(duì)應(yīng)的數(shù)據(jù)或服務(wù)。函數(shù)的返回值是一個(gè)對(duì)象，具有相同的格式。
下面是一個(gè)簡(jiǎn)單的例子，演示了如何使用依賴注入的方式共享數(shù)據(jù)：
父組件
<template>
<div>
<h1>我是祖先組件</h1>
<child-component></child-component>
</div>
</template><script>
import ChildComponent from './ChildComponent.vue'
export default {
name: 'AncestorComponent',
components: {
ChildComponent
},
// 提供一個(gè)名為message的數(shù)據(jù)
provide: {
message: 'Hello from ancestor'
}
}
</script>子組件
<template>
<div>
<h2>我是后代組件</h2>
<p>{{ message }}</p>
</div>
</template>// 后代組件
<script>
export default {
name: 'ChildComponent',
// 接收一個(gè)名為message的數(shù)據(jù)
inject: ['message']
}
</script>這樣，后代組件就可以直接使用祖先組件提供的數(shù)據(jù)，而不需要通過(guò)props或事件來(lái)傳遞。
需要注意的是，依賴注入的數(shù)據(jù)是不可響應(yīng)的，也就是說(shuō)，如果祖先組件修改了提供的數(shù)據(jù)，后代組件不會(huì)自動(dòng)更新。
如果需要實(shí)現(xiàn)響應(yīng)性，可以使用一個(gè)響應(yīng)式的對(duì)象或者一個(gè)返回響應(yīng)式對(duì)象的函數(shù)作為provide的值。
實(shí)現(xiàn)響應(yīng)式依賴注入的幾種方式
一、提供響應(yīng)式數(shù)據(jù)
方法是在提供者組件中使用ref或reactive創(chuàng)建響應(yīng)式數(shù)據(jù),然后通過(guò)provide提供給后代組件。后代組件通過(guò)inject接收后,就可以響應(yīng)數(shù)據(jù)的變化。
提供者：
<template>
<div>
<h1>我是提供者組件</h1>
<button @click="count++">增加計(jì)數(shù)</button>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
import { ref, provide } from 'vue'
export default {
name: 'ProviderComponent',
components: {
ChildComponent
},
setup() {
// 使用ref創(chuàng)建一個(gè)響應(yīng)式的計(jì)數(shù)器
const count = ref(0)
// 提供給后代組件
provide('count', count)
return {
count
}
}
}
</script>接收者：
<template>
<div>
<h2>我是接收者組件</h2>
<p>計(jì)數(shù)器的值是：{{ count }}</p>
</div>
</template>
<script>
import { inject } from 'vue'
export default {
name: 'ChildComponent',
setup() {
// 接收提供者組件提供的響應(yīng)式對(duì)象
const count = inject('count')
return {
count
}
}
}
</script>二、提供修改數(shù)據(jù)的方法
提供者組件可以提供修改數(shù)據(jù)的方法函數(shù),接收者組件調(diào)用該方法來(lái)更改數(shù)據(jù),而不是直接修改注入的數(shù)據(jù)。
提供者：
<template>
<div>
<h2>我是接收者組件</h2>
<p>計(jì)數(shù)器的值是：{{ count }}</p>
</div>
</template>
<script>
import { inject } from 'vue'
export default {
name: 'ChildComponent',
setup() {
// 接收提供者組件提供的響應(yīng)式對(duì)象
const count = inject('count')
return {
count
}
}
}
</script>接收者：
<template>
<div>
<h2>我是接收者組件</h2>
<p>消息是：{{ message }}</p>
<button @click="updateMessage">更改消息</button>
</div>
</template>
<script>
import { inject } from 'vue'
export default {
name: 'ChildComponent',
setup() {
// 接收提供者組件提供的響應(yīng)式對(duì)象和方法
const { message, updateMessage } = inject('message')
return {
message,
updateMessage
}
}
}
</script>三、使用readonly包裝
通過(guò)readonly包裝provide的數(shù)據(jù),可以防止接收者組件修改數(shù)據(jù),保證數(shù)據(jù)流的一致性。
提供者：
<template>
<div>
<h1>我是提供者組件</h1>
<p>姓名是：{{ name }}</p>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
import { ref, provide, readonly } from 'vue'
export default {
name: 'ProviderComponent',
components: {
ChildComponent
},
setup() {
// 使用ref創(chuàng)建一個(gè)響應(yīng)式的姓名
const name = ref('Alice')
// 使用readonly包裝提供的值，使其不可修改
provide('name', readonly(name))
return {
name
}
}
}
</script>接收者：
<template>
<div>
<h2>我是接收者組件</h2>
<p>姓名是：{{ name }}</p>
<button @click="name = 'Bob'">嘗試修改姓名</button>
</div>
</template>
<script>
import { inject } from 'vue'
export default {
name: 'ChildComponent',
setup() {
// 接收提供者組件提供的只讀對(duì)象
const name = inject('name')
return {
name
}
}
}
</script>四、使用<script setup>
在
<script setup>組合式寫法下,provide和inject默認(rèn)就是響應(yīng)式的,無(wú)需額外處理。
總結(jié)
依賴注入的方式共享數(shù)據(jù)在Vue中是一種高級(jí)特性，它主要用于開發(fā)插件或庫(kù)，或者處理一些特殊的場(chǎng)景。
到此這篇關(guān)于Vue 使用依賴注入的方式共享數(shù)據(jù)的文章就介紹到這了,更多相關(guān)Vue 依賴注入使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue用@表示src文件夾，引入時(shí)找文件路徑更方便,下面這篇文章主要給大家介紹了關(guān)于vue配置根目錄(用@代表src目錄)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue3循環(huán)展示圖片實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了vue3循環(huán)展示圖片實(shí)現(xiàn)過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-05-05
vue腳手架搭建/idea執(zhí)行vue項(xiàng)目全過(guò)程
新建目錄并運(yùn)行命令提示符,通過(guò)npm安裝Vue腳手架并查看版本號(hào),接著,使用vue create命令創(chuàng)建Vue項(xiàng)目,選擇所需配置后完成項(xiàng)目創(chuàng)建,創(chuàng)建成功可見Vue文件夾,使用IDEA打開項(xiàng)目,并啟動(dòng)項(xiàng)目,根據(jù)需求修改初始化界面2024-10-10
前端vue2+js+springboot實(shí)現(xiàn)excle導(dǎo)入優(yōu)化解決方案
這篇文章主要介紹了前端vue2+js+springboot實(shí)現(xiàn)excle導(dǎo)入優(yōu)化的相關(guān)資料,前端優(yōu)化包括使用ElementUI組件和封裝的JS解析函數(shù),后端重點(diǎn)在于多線程處理,通過(guò)定義線程安全技術(shù)及數(shù)據(jù)分片實(shí)現(xiàn)高效導(dǎo)入,需要的朋友可以參考下2025-11-11
vue中國(guó)城市選擇器的使用教程(element-china-area-data)
這篇文章主要給大家介紹了關(guān)于vue中國(guó)城市選擇器使用(element-china-area-data)的相關(guān)資料,使用element-china-area-data插件可以非常方便地實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)選擇器,需要的朋友可以參考下2023-11-11
vue 折疊展示多行文本組件的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 折疊展示多行文本組件，自動(dòng)根據(jù)傳入的expand判斷是否需要折疊，非常完美，文章通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2021-10-10
詳解vue axios用post提交的數(shù)據(jù)格式
這篇文章主要介紹了詳解vue axios用post提交的數(shù)據(jù)格式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
本篇文章主要介紹了vue路由懶加載的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
elementUI table表格動(dòng)態(tài)合并的示例代碼
這篇文章主要介紹了elementUI table表格動(dòng)態(tài)合并的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue computed實(shí)現(xiàn)原理深入講解
computed又被稱作計(jì)算屬性，用于動(dòng)態(tài)的根據(jù)某個(gè)值或某些值的變化，來(lái)產(chǎn)生對(duì)應(yīng)的變化，computed具有緩存性，當(dāng)無(wú)關(guān)值變化時(shí)，不會(huì)引起computed聲明值的變化。產(chǎn)生一個(gè)新的變量并掛載到vue實(shí)例上去2022-10-10