在本文中，我們將研究如何在Vue.js中將數(shù)據(jù)從父組件傳遞到子組件。這篇文章適合所有階段的開發(fā)人員，包括初學(xué)者。

在開始之前

我們可以在Vue.js中使用事件發(fā)射器修改組件數(shù)據(jù)的方法一文中查看使用事件發(fā)射器在vue.js中將數(shù)據(jù)及其狀態(tài)從子組件傳遞到其父組件的方法。

在閱讀本文之前，您應(yīng)該已經(jīng)了解了以下幾點(diǎn)。

您的電腦中將需要以下內(nèi)容：

• 已安裝Node.js版本10.x及更高版本。 您可以通過在終端/命令提示符下運(yùn)行以下命令來驗(yàn)證是否已安裝：

node -v

• 代碼編輯器：建議使用Visual Studio Code

• Vue的最新版本，已全局安裝在您的計(jì)算機(jī)上

• 您的計(jì)算機(jī)上已安裝Vue CLI 3.0。 為此，請先卸載舊的CLI版本：

npm uninstall -g vue-cli

然后安裝一個(gè)新的:

npm install -g @vue/cli

• 在這里下載一個(gè)Vue入門項(xiàng)目

• 解壓下載的項(xiàng)目

• 導(dǎo)航到解壓縮的文件，并運(yùn)行命令，以保持所有的依賴關(guān)系最新:

npm install

效率問題

如果你有一個(gè)數(shù)據(jù)對象（比如廣告牌前十名藝術(shù)家列表），你想用兩個(gè)不同的組件來顯示，但是用的方式非常不同，那么你的第一反應(yīng)就是創(chuàng)建這兩個(gè)獨(dú)立的組件，在數(shù)據(jù)對象中添加數(shù)組，然后在模板中顯示它們。

這個(gè)解決方案非常好，但是當(dāng)您添加