vue2實現provide inject傳遞響應式
1. vue2 中的常規寫法
// 父級組件提供 'foo' var Provider = { data(){ return { foo: 'bar' } } provide: { fooProvide: this.fooFn // 傳遞一個引用類型函數過去 }, methods:{ fooFn() { return this.foo } } } var Child = { inject: ['fooProvide'], computed:{ fooComputed(){ return this.fooProvide() // 因為傳遞過來是個引用類型的函數 } } created () { console.log(this.fooComputed) } // ... }
2. vue2 中的不太常規寫法,但用得舒服.(大概用法還是一樣,隻是傳遞的值變成 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 下面都是響應式的,因為都是同一實例下的引用 } // ... }
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) // ... }
到此這篇關於vue2實現provide inject傳遞響應式 的文章就介紹到這瞭,更多相關vue2 provide inject 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue中的inject用法及說明
- Vue3全局組件通信之provide / inject詳解
- 詳解vue組件之間相互傳值的方式
- Vue 中 provide和inject的使用
- vue3中 provide 和 inject 用法及原理