vue provide和inject 依賴用法

需求:

當我們有各別方法或都對象之類的需要父子組件傳遞或都爺孫傳遞,可能有的人想用vuex或者props層層傳下去,如果用vuex有點小題大作了;如果用props那每個組件都要引入;有點麻煩;那麼我們可以考慮用到provide傳值在子組件或孫組件用inject接收

1.provide就相當於加強版父組件prop 

      provide選項應該是一個對象或返回一個對象的函數。該對象包含可注入其子孫的屬性。在該對象中你可以使用 ES2015 Symbols 作爲 key，但是隻在原生支持 Symbol 和 Reflect.ownKeys 的環境下可工作。

2.inject就相當於加強版子組件的props  

      

inject 選項應該是：

• 一個字符串數組，或
• 一個對象，對象的 key 是本地的綁定名，value 是：
  • 在可用的注入內容中搜索用的 key (字符串或 Symbol)，或
  • 一個對象，該對象的：
    • from 屬性是在可用的注入內容中搜索用的 key (字符串或 Symbol)
    • default 屬性是降級情況下使用的 value

這對選項需要一起使用，以允許一個祖先組件向其所有子孫後代注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裏始終生效。

// 父級組件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子組件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

 

案例:

 子組件想要調用父組件loading方法,我們可以將父組件的整個this傳過去

父組件:provide傳值 

<el-main class="bg-light" style="padding-bottom: 60px;position: relative;" v-loading="loading">
<!-- 主內容 -->
	<div>主內容 </div>
</el-main>

 

export default {
	provide(){
		return {
		    layout:this
		}
	},
	data() {
	    return {
			loading:false
		}
	},
methods: {
		// 顯示loading
		showLoading(){
		    this.loading = true
		},
    }
}

子組件用inject接收

export default {
	inject:['layout'],
methods: {
getImageList(){
	this.layout.showLoading()
    //請求數據
    }
}