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