Vue 使用依賴注入的方式共享數(shù)據(jù)的過程
什么是vue依賴注入？
Vue是一個用于構(gòu)建用戶界面的漸進(jìn)式框架。
它提供了一種簡單而靈活的方式來管理組件之間的數(shù)據(jù)流，即依賴注入（Dependency Injection，DI）。
依賴注入是一種設(shè)計模式，它允許一個組件從另一個組件獲取它所依賴的數(shù)據(jù)或服務(wù)，而不需要自己創(chuàng)建或管理它們。這樣可以降低組件之間的耦合度，提高代碼的可維護(hù)性和可測試性。
依賴注入示意圖
provide和inject
在Vue中，依賴注入的方式是通過provide和inject兩個選項來實現(xiàn)的。
provide選項允許一個祖先組件向下提供數(shù)據(jù)或服務(wù)給它的所有后代組件。
inject選項允許一個后代組件接收來自祖先組件的數(shù)據(jù)或服務(wù)。
這兩個選項都可以是一個對象或一個函數(shù)，對象的鍵是提供或接收的數(shù)據(jù)或服務(wù)的名稱，值是對應(yīng)的數(shù)據(jù)或服務(wù)。函數(shù)的返回值是一個對象，具有相同的格式。
下面是一個簡單的例子，演示了如何使用依賴注入的方式共享數(shù)據(jù)：
父組件
<template>
<div>
<h1>我是祖先組件</h1>
<child-component></child-component>
</div>
</template><script>
import ChildComponent from './ChildComponent.vue'
export default {
name: 'AncestorComponent',
components: {
ChildComponent
},
// 提供一個名為message的數(shù)據(jù)
provide: {
message: 'Hello from ancestor'
}
}
</script>子組件
<template>
<div>
<h2>我是后代組件</h2>
<p>{{ message }}</p>
</div>
</template>// 后代組件
<script>
export default {
name: 'ChildComponent',
// 接收一個名為message的數(shù)據(jù)
inject: ['message']
}
</script>這樣，后代組件就可以直接使用祖先組件提供的數(shù)據(jù)，而不需要通過props或事件來傳遞。
需要注意的是，依賴注入的數(shù)據(jù)是不可響應(yīng)的，也就是說，如果祖先組件修改了提供的數(shù)據(jù)，后代組件不會自動更新。
如果需要實現(xiàn)響應(yīng)性，可以使用一個響應(yīng)式的對象或者一個返回響應(yīng)式對象的函數(shù)作為provide的值。
實現(xiàn)響應(yīng)式依賴注入的幾種方式
一、提供響應(yīng)式數(shù)據(jù)
方法是在提供者組件中使用ref或reactive創(chuàng)建響應(yīng)式數(shù)據(jù),然后通過provide提供給后代組件。后代組件通過inject接收后,就可以響應(yīng)數(shù)據(jù)的變化。
提供者：
<template>
<div>
<h1>我是提供者組件</h1>
<button @click="count++">增加計數(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)建一個響應(yīng)式的計數(shù)器
const count = ref(0)
// 提供給后代組件
provide('count', count)
return {
count
}
}
}
</script>接收者：
<template>
<div>
<h2>我是接收者組件</h2>
<p>計數(shù)器的值是：{{ count }}</p>
</div>
</template>
<script>
import { inject } from 'vue'
export default {
name: 'ChildComponent',
setup() {
// 接收提供者組件提供的響應(yīng)式對象
const count = inject('count')
return {
count
}
}
}
</script>二、提供修改數(shù)據(jù)的方法
提供者組件可以提供修改數(shù)據(jù)的方法函數(shù),接收者組件調(diào)用該方法來更改數(shù)據(jù),而不是直接修改注入的數(shù)據(jù)。
提供者：
<template>
<div>
<h2>我是接收者組件</h2>
<p>計數(shù)器的值是：{{ count }}</p>
</div>
</template>
<script>
import { inject } from 'vue'
export default {
name: 'ChildComponent',
setup() {
// 接收提供者組件提供的響應(yīng)式對象
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)式對象和方法
const { message, updateMessage } = inject('message')
return {
message,
updateMessage
}
}
}
</script>三、使用readonly包裝
通過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)建一個響應(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() {
// 接收提供者組件提供的只讀對象
const name = inject('name')
return {
name
}
}
}
</script>四、使用<script setup>
在
<script setup>組合式寫法下,provide和inject默認(rèn)就是響應(yīng)式的,無需額外處理。
總結(jié)
依賴注入的方式共享數(shù)據(jù)在Vue中是一種高級特性，它主要用于開發(fā)插件或庫，或者處理一些特殊的場景。
到此這篇關(guān)于Vue 使用依賴注入的方式共享數(shù)據(jù)的文章就介紹到這了,更多相關(guān)Vue 依賴注入使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用Vue3和Plotly.js打造一個3D圖在線展示的實現(xiàn)步驟
三維網(wǎng)格圖廣泛應(yīng)用于科學(xué)可視化、醫(yī)學(xué)成像、工程設(shè)計等領(lǐng)域,用于展示復(fù)雜的數(shù)據(jù)結(jié)構(gòu)和空間分布,本文給大家介紹了使用Vue3和Plotly.js打造一個3D圖在線展示的實現(xiàn)步驟,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-07-07
Vue報錯Module build failed: Error: Node&nb
這篇文章主要介紹了Vue報錯Module build failed: Error: Node Sass version 7.0.1 is incompatible with 4.0.0.解決方案,需要的朋友可以參考下2023-06-06
使用Vue.js和Flask來構(gòu)建一個單頁的App的示例
本篇文章主要介紹了使用Vue.js和Flask來構(gòu)建一個單頁的App的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue 組件如何模塊化抽離Props的相關(guān)知識,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了vue3.0 加載json的方法（非ajax），幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
Vue.js 是一套構(gòu)建用戶界面的漸進(jìn)式框架。我們可以使用簡單的 API 來實現(xiàn)響應(yīng)式的數(shù)據(jù)綁定和組合的視圖組件。2017-03-03
vue新玩法VueUse工具庫具體用法@vueuse/core詳解
這篇文章主要介紹了vue新玩法VueUse-工具庫@vueuse/core,VueUse不是Vue.use，它是一個基于?Composition?API?的實用函數(shù)集合，下面是具體的一些用法，需要的朋友可以參考下2022-08-08
在Vue3中處理異步API調(diào)用并更新表單數(shù)據(jù)的方法示例
這篇文章主要介紹了如何在Vue3中處理異步API調(diào)用并更新表單數(shù)據(jù)（附Demo）,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06
Vue網(wǎng)頁html轉(zhuǎn)換PDF（最低兼容ie10）的思路詳解
這篇文章主要介紹了Vue網(wǎng)頁html轉(zhuǎn)換PDF（最低兼容ie10）的思路詳解,實現(xiàn)此功能需要引入兩個插件，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了Vue組件實現(xiàn)卡片動畫倒計時示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07