Vue框架提供了一種非常便捷的方法，通過inject將數(shù)據(jù)注入到一個(gè)可以隨處訪問的對(duì)象中。這個(gè)對(duì)象可以在子組件和孫子組件中使用，而不需要一層一層地傳遞props。

使用inject方法前，需要在父組件中使用provide方法提供數(shù)據(jù)。provide接受一個(gè)對(duì)象，對(duì)象中的所有屬性都可以通過inject方法進(jìn)行訪問：

// 父組件提供數(shù)據(jù)
provide() {
return {
username: 'Linda',
age: 25
}
}

在子組件和孫子組件中，可以使用inject方法來訪問父組件提供的數(shù)據(jù)。inject方法接受一個(gè)數(shù)組，數(shù)組中的每個(gè)元素都是從父組件provide中對(duì)應(yīng)的屬性名：

// 子組件注入數(shù)據(jù)
inject: ['username', 'age']

這樣子組件就可以直接訪問父組件提供的屬性了：

<template>
<div>
<p>My name is {{ username }}, and I'm {{ age }} years old.</p>
</div>
</template>

需要注意的是，父組件provide并不會(huì)響應(yīng)式地更新到所有子孫組件。如果想要實(shí)現(xiàn)響應(yīng)式更新，需要使用Vue.observable()方法來轉(zhuǎn)化提供的數(shù)據(jù)：

// 父組件提供響應(yīng)式數(shù)據(jù)
provide() {
const state = Vue.observable({
username: 'Linda',
age: 25
});
return state;
}

這樣就可以在子孫組件中通過inject方法隨時(shí)訪問并更新父組件提供的響應(yīng)式數(shù)據(jù)了。