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

在開始之前

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

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

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

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

node -v

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

• Vue的最新版本，已全局安裝在您的計算機上

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

npm uninstall -g vue-cli

然后安裝一個新的:

npm install -g @vue/cli

• 在這里下載一個Vue入門項目

• 解壓下載的項目

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

npm install

效率問題

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

這個解決方案非常好，但是當您添加