Vue的inject是一種在祖先組件中注入依賴至后代的機制。這樣一來,我們就可以在不通過props將組件一層層選擇傳遞的情況下,將依賴注入到子組件中。這是一個很方便的功能,尤其是當需要在整個應用中共享配置或工具時。
// 例如,在父級中創建一個注入器,該注入器為所有子組件提供了相同的屬性。 var provider = { provide: { greeting: 'Hello world' } } // 子組件使用inject來訪問該屬性。 export default { inject: ['greeting'], created(){ console.info(this.greeting); // 輸出 'Hello world' } }
在上面的例子中,我們創建了一個名為provider的組件,該組件通過provide屬性將'Hello world'屬性注入到其子組件中。子組件通過inject屬性來訪問該屬性的值。需要注意的是,inject屬性可以是一個字符串數組或一個對象。在使用字符串數組的情況下,每個字符串都代表一個依賴屬性,該屬性會被注入到組件中。
除此之外,使用inject時,還可以通過provide提供一個函數,該函數可以被注入的組件調用,從而實現更加強大的功能。例如:
// 在父組件中,我們可以定義一個包含了一個方法的對象,并將該對象注入到子組件中。 var provider = { provide(){ return { sayHi: () =>{ console.info('Hi, Vue') } } } } // 在子組件中,我們可以使用inject來訪問該方法。 export default { inject: ['sayHi'], created(){ this.sayHi(); // 輸出 'Hi, Vue' } }
通過上面的例子,我們可以看到,在provide返回的對象中,我們可以定義任意的屬性或方法,并且這些屬性和方法都可以被注入到子組件中。子組件在通過inject訪問這些屬性和方法時,可以使用這些屬性和方法。