vue2實(shí)現(xiàn)provide inject傳遞響應(yīng)式
更新時(shí)間：2021年05月21日 16:18:17 作者：TAOBO
在看element-ui的源碼的時(shí)候，注意到源碼里面有很多地方使用provide和inject的屬性，本文主要介紹了vue2實(shí)現(xiàn)provide inject傳遞響應(yīng)式，分享給大家，感興趣的可以了解一下
1. vue2 中的常規(guī)寫法
// 父級(jí)組件提供 'foo'
var Provider = {
data(){
return {
foo: 'bar'
}
}
provide: {
fooProvide: this.fooFn // 傳遞一個(gè)引用類型函數(shù)過去
},
methods:{
fooFn() {
return this.foo
}
}
}
var Child = {
inject: ['fooProvide'],
computed:{
fooComputed(){
return this.fooProvide() // 因?yàn)閭鬟f過來是個(gè)引用類型的函數(shù)
}
}
created () {
console.log(this.fooComputed)
}
// ...
}
2. vue2 中的不太常規(guī)寫法,但用得舒服.(大概用法還是一樣,只是傳遞的值變成 this--> 整個(gè)實(shí)例)
// 父級(jí)組件提供 'foo'
var Provider = {
data(){
return {
foo: 'bar',
other:'...'
}
}
provide: {
app: this// 傳遞整個(gè)this過去
},
mounted(){
const that = this
setTimeout(()=>{
that.foo = '改變值'
},4000)
}
}
var Child = {
inject: ['app'],
created () {
console.log(this.app.foo) // this.app 下面都是響應(yīng)式的,因?yàn)槎际峭粚?shí)例下的引用
}
// ...
}
3. vue2 + ts (因?yàn)閠s之前沒用過的話確實(shí)不知道怎么用,所以示例一下)
Provide 方式:
1. @Provide() foo = 'foo'
2. @Provide('bar') baz = 'bar'
Inject 方式:
1. @Inject() foo: string
2. @Inject('bar') bar: string
3. @Inject(s) baz: string
示例:
// 父級(jí)組件提供 'fooProvide'
@Provide('fooProvide') // 隨意起名,傳遞跟接收一樣就行.但一般保持跟下面變量一樣
fooProvide = this.refreshNumFn // 變量接收一下要傳遞的值
refreshNumFn() {
return this.refreshNum
}
// 子組件接收
@Inject('fooProvide') fooProvide: any
get valueA(): any {
return this.fooProvide()
}
mounted(){
console.log(this.valueA) // ...
}
到此這篇關(guān)于vue2實(shí)現(xiàn)provide inject傳遞響應(yīng)式 的文章就介紹到這了,更多相關(guān)vue2 provide inject 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-admin-template框架搭建及應(yīng)用小結(jié)
?vue-admin-template是基于vue-element-admin的一套后臺(tái)管理系統(tǒng)基礎(chǔ)模板（最少精簡(jiǎn)版），可作為模板進(jìn)行二次開發(fā)，這篇文章主要介紹了vue-admin-template框架搭建及應(yīng)用,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)條件疊加搜索的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要為大家分享了一個(gè)非常實(shí)用的vue導(dǎo)航鉤子，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了Vue中的循環(huán)遍歷與key值原理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
跨域是指當(dāng)一個(gè)資源去訪問另一個(gè)不同域名或者同域名不同端口的資源時(shí),就會(huì)發(fā)出跨域請(qǐng)求,下面這篇文章主要給大家介紹了關(guān)于vue使用vite配置跨域以及環(huán)境配置的相關(guān)資料,需要的朋友可以參考下2022-07-07
詳解如何在Vue2中實(shí)現(xiàn)組件props雙向綁定
在Vue2中組件的props的數(shù)據(jù)流動(dòng)改為了只能單向流動(dòng)，如何在Vue2中實(shí)現(xiàn)組件props雙向綁定 ，一起來跟小編看看。2017-03-03
離線搭建vue環(huán)境運(yùn)行項(xiàng)目詳細(xì)步驟
由于公司要求在內(nèi)網(wǎng)開發(fā)項(xiàng)目,而內(nèi)網(wǎng)不能連接外網(wǎng),因此只能離線安裝vue環(huán)境,下面這篇文章主要給大家介紹了關(guān)于離線搭建vue環(huán)境運(yùn)行項(xiàng)目的詳細(xì)步驟,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vue ECharts圖表通用配置，Echarts，它是一個(gè)與框架無關(guān)的 JS 圖表庫(kù)，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計(jì)IONIC也能用2022-12-12
.sync修飾符算是Vue的所有修飾符中較難理解的一個(gè)，本篇文章就帶你走近.sync的世界，深入理解后會(huì)發(fā)現(xiàn)，其實(shí)也就那么回事。修飾符和指令息息相關(guān)，下面從指令 ->修飾符->.sync修飾符由淺入深地來講解 .sync的含義及用法。2021-05-05
Vue項(xiàng)目中實(shí)現(xiàn)帶參跳轉(zhuǎn)功能
最近做了一個(gè)手機(jī)端系統(tǒng)，其中遇到了父頁(yè)面需要攜帶參數(shù)跳轉(zhuǎn)至子頁(yè)面的問題，現(xiàn)已解決，下面分享一下實(shí)現(xiàn)過程，感興趣的朋友一起看看吧2021-04-04