vue中的依賴注入provide和inject簡單介紹
vue中的依賴注入 provide 和 inject
vue中的依賴注入 provide 和 inject
provide 選項(xiàng)允許我們指定我們想要提供給后代組件的數(shù)據(jù)/方法。
下面是一個組價刷新的案列
<template> <div > <div class="view"> <router-view v-if="isRouterAlive"></router-view> </div> </div> </template> <script> export default { data() { return { isRouterAlive: true } }, provide() { return { reload: this.reload } }, methods: { reload() { this.isRouterAlive = false this.$nextTick(function() { this.isRouterAlive = true }) } } }
然后在任何后代組件里,我們都可以使用 inject 選項(xiàng)來接收指定的我們想要添加在這個實(shí)例上的屬性:
inject: ['reload']
注:依賴注入所提供的屬性是非響應(yīng)式
vue中的依賴注入provide和inject場景解析(簡單易懂)
本文開始,首先我們來看這兩個詞的意思,provide:提供 inject:注入
用處:
父組件可以向其所有子組件傳入數(shù)據(jù),而“不管子組件層次結(jié)構(gòu)有多深(非父子和父子咱都能傳)”
特性:
父組件有一個provide選項(xiàng)來提供數(shù)據(jù)
子組件有一個inject選項(xiàng)來開始使用這個數(shù)據(jù)
本文參考組件層級:
Index組件
\ A組件
\ B組件
代碼區(qū):
場景1:我想要Index組件直接給b組件傳值
Index組件代碼:
<template> <div> <div>我是index組件</div> <A></A> </div> </template> <script> import A from '@/components/A.vue' export default { components: { A }, data() { return {} }, provide: { text: '我是父組件的provide信息666' } } </script> <style></style>
接收的B組件代碼:
<template> <div> <div>我是B組件</div> <div>{{ msg }}</div> </div> </template> <script> export default { name: 'B', data() { return { msg: this.text } }, inject: ['text'] } </script> <style></style>
當(dāng)然,provide還有第二種寫法,寫成函數(shù)的形式
Index組件代碼:
<template> <div> <div>我是index組件</div> <A></A> </div> </template> <script> import A from '@/components/A.vue' export default { components: { A }, data() { return { arr: ['1', '2', '3'] } }, // provide: { // text: '我是父組件的provide信息666' // } provide() { return { arr: this.arr } } } </script> <style></style>
B組件代碼:
<template> <div> <div>我是B組件</div> <div>{{ msg }}</div> <ul v-for="(item, index) in arr" :key="index"> <li>{{ item }}</li> </ul> </div> </template> <script> export default { name: 'B', data() { return { msg: this.text } }, inject: ['arr'] } </script> <style></style>
運(yùn)行截圖:
對比:
如果使用常見的props方式傳值需要:index->a->b
如果使用provide/inject方式傳值:index->a index->b
本文如有錯誤,還望各位批評指針,希望能幫助到大家更好的理解vue的provide和inject
到此這篇關(guān)于vue中的依賴注入provide和inject簡單介紹的文章就介紹到這了,更多相關(guān)vue依賴注入provide和inject內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue自定義指令實(shí)現(xiàn)僅支持輸入數(shù)字和浮點(diǎn)型的示例
今天小編就為大家分享一篇vue自定義指令實(shí)現(xiàn)僅支持輸入數(shù)字和浮點(diǎn)型的示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表(1)
這篇文章主要為大家詳細(xì)介紹了VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-06-06Vuex實(shí)現(xiàn)數(shù)據(jù)增加和刪除功能
今天小編就為大家分享一篇Vuex實(shí)現(xiàn)數(shù)據(jù)增加和刪除功能,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11vue3項(xiàng)目導(dǎo)入異常Error:@vitejs/PLUGIN-vue?requires?vue?(>=3.2.13
這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目導(dǎo)入異常Error:@vitejs/PLUGIN-vue?requires?vue?(>=3.2.13)的解決辦法,文中將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01一步步教你利用webpack如何搭一個vue腳手架(超詳細(xì)講解和注釋)
這篇文章主要給大家介紹了軟玉利用webpack如何搭一個vue腳手架的相關(guān)資料,文中有超詳細(xì)講解和注釋,對大家學(xué)習(xí)或者使用webpack具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01