Vue.js中使用道具将数据传递到的子组件

在本文中，我们将研究如何在Vue.js中将数据从父组件传递到子组件。这篇文章适合所有阶段的开发人员，包括初学者。

在开始之前

我们可以在Vue.js中使用事件发射器修改组件数据的方法一文中查看使用事件发射器在vue.js中将数据及其状态从子组件传递到其父组件的方法。

在阅读本文之前，您应该已经了解了以下几点。

您的电脑中将需要以下内容：

• 已安装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入门项目

• 解压下载的项目

• 导航到解压缩的文件，并运行命令，以保持所有的依赖关系最新:

npm install

效率问题

如果你有一个数据对象（比如广告牌前十名艺术家列表），你想用两个不同的组件来显示，但是用的方式非常不同，那么你的第一反应就是创建这两个独立的组件，在数据对象中添加数组，然后在模板中显示它们。

这个解决方案非常好，但是当您添加