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

效率问题

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

这个解决方案非常好，但是当您添加更多组件时，它将成为一个非有效的解决方案。让我们用您在vs代码中打开的starter项目来演示这一点。

演示

打开测试。将vue文件复制到下面的代码块中:

在“组件”文件夹中创建一个新文件，将其命名为test2.vue并将下面的代码块粘贴到其中：

li{
    height: 40px;
    width: 100%;
    padding: 15px;
    border: 1px solid saddlebrown;
    display: flex;
    justify-content: center;
    align-items: center;
  }  
a {
  color: #42b983;
}

要注册刚创建的新组件，请打开app.vue文件并在其中复制以下代码：

使用VS代码终端中的此命令在开发环境中启动应用程序：

npm run serve

应该是这样的：

您可以看到，如果您还有大约五个组件，则必须继续复制每个组件中的数据。想象一下，如果有一种方法可以定义父组件中的数据，然后将其带到每个需要它的子组件中，并使用属性名。

解决方案：Vue道具

Vue团队提供了他们所称的道具，这些道具是可以在任何组件上注册的自定义属性。它的工作方式是在父组件上定义数据并给它一个值，然后转到需要该数据的子组件并将该值传递给prop属性，以便该数据成为子组件中的属性。

语法如下：

Vue.component('blog-post', {
  props: ['title'],
  template: '
{{ title }}
'
})

您可以使用根组件（app.vue）作为父组件并存储数据，然后注册道具从任何需要它的组件动态访问此数据。

在父组件中定义数据

选择根组件作为父组件后，必须首先定义要在根组件内动态共享的数据对象。如果您从一开始就关注这篇文章，请打开app.vue文件并在脚本部分中复制数据对象代码块：

接收道具

定义数据之后，进入两个测试组件并删除其中的数据对象。要在组件中接收道具，必须指定要在该组件中接收的道具。进入两个测试组件，在脚本部分添加规范，如下所示：

因此，每当您添加了一个错误的类型say string时，您将在控制台中收到一个警告，告诉您它得到的类型不是预期的类型。

感谢各位的阅读！关于“Vue.js中怎样使用道具将数据传递到的子组件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！