vue2中provide/inject的使用與響應式傳值詳解
更新時間：2022年09月22日 08:50:59 作者：Min_Fox
Vue中 Provide/Inject實現(xiàn)了跨組件的通信,下面這篇文章主要給大家介紹了關于vue2中provide/inject的使用與響應式傳值的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
前言
官網(wǎng)概念：這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在其上下游關系成立的時間里始終生效。
一、基本用法
在父組件中使用provide傳值，在子組件中用inject接收。
// 父組件
data() {
return {
name: "卷兒"
}
},
provide: function() {
return {
name: this.name
}
},
// 子組件 inject: ['name'],
這種方法傳遞過來的數(shù)據(jù)是沒有響應性的，當你改變父組件中的name時，子組件中接收的name并不會改變。
官方解釋：provide 和 inject 綁定并不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監(jiān)聽的對象，那么其對象的 property 還是可響應的。
二、響應式
1.方法一：傳遞的參數(shù)用一個方法返回
// 父組件
data() {
return {
name: "卷兒"
}
},
provide: function() {
return {
newName: () => this.name
}
// 子組件
inject: ['newName'],
computed: {
hnewName() {
return this.newName()
}
}
<!-- 子組件中的使用方式 -->
<h2>{{ hnewName }}</h2> <!-- 推薦使用這種方法 -->
<h2>{{ newName() }}</h2>
2.方法二：把需要傳遞的參數(shù)定義成一個對象
官方解釋：provide 和 inject 綁定并不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監(jiān)聽的對象，那么其對象的 property 還是可響應的。
// 父組件
data() {
return {
obj: {
name: "卷兒"
}
}
},
provide: function() {
return {
// 傳遞一個對象
obj: this.obj
}
},
// 子組件
inject: ['obj'],
computed: {
// 也可以不用計算屬性重新定義
objName() {
return this.obj.name
}
}
<!-- 子組件中的使用方法 -->
<h2>obj的name： {{objName}}</h2>
<h2>obj的name： {{obj.name}}</h2>
總結
主要解決深層次的組件嵌套，祖先組件向子孫組件之間傳值。
一層嵌套的父子組件可以使用props來傳值，props本身就是有相應性的。
根據(jù)自身代碼選擇合適的傳值方式，并不一定非要用provide/inject的傳值。
到此這篇關于vue2中provide/inject使用與響應式傳值的文章就介紹到這了,更多相關vue2 provide/inject響應式傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要介紹了vue中如何引入jQuery和Bootstrap，詳細的介紹了引入jQuery和Bootstrap的方法，有興趣的可以了解一下。2017-04-04
Vue子組件props從父組件接收數(shù)據(jù)并存入data
這篇文章主要介紹了Vue子組件props從父組件接收數(shù)據(jù)并存入data的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了Vue 2.X的狀態(tài)管理vuex記錄的相關資料，文中介紹的非常詳細，對大家的理解和學習具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
本篇文章主要介紹了vue中配置mint-ui報css錯誤問題的解決方法，非常具有實用價值，需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細介紹了Vue實現(xiàn)跑馬燈樣式文字橫向滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
vue-video-player 解決微信自動全屏播放問題(橫豎屏導致樣式錯亂問題)
這篇文章主要介紹了vue-video-player 解決微信自動全屏播放問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
下面小編就為大家?guī)硪黄唵握務剉ue的過渡動畫(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
vue2實現(xiàn)在el-table里插入el-tag的示例代碼
這篇文章主要介紹了vue2實現(xiàn)在el-table里插入el-tag的示例代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-12-12
這篇文章主要介紹了vue的面包屑導航組件，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
VUE3+TS遞歸組件實現(xiàn)TreeList設計實例詳解
這篇文章主要為大家介紹了VUE3+TS遞歸組件實現(xiàn)TreeList設計實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09