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

首页

web前端

Vue.js

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

青灯夜游

Sep 30, 2020 pm 05:55 PM

vue.js

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文件复制到下面的代码块中:

<template>
  <div>
    <h1 id="Vue-nbsp-Top-nbsp-nbsp-Artists">Vue Top 20 Artists</h1>
    <ul>
      <li v-for="(artist, x) in artists" :key="x">
      <h3 id="artist-name">{{artist.name}}</h3>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;,
  data (){
    return {
      artists: [
       {name: &#39;Davido&#39;, genre: &#39;afrobeats&#39;, country: &#39;Nigeria&#39;},
       {name: &#39;Burna Boy&#39;, genre: &#39;afrobeats&#39;, country: &#39;Nigeria&#39;},
       {name: &#39;AKA&#39;, genre: &#39;hiphop&#39;, country: &#39;South-Africa&#39;},
       {name: &#39;Sarkodie&#39;, genre: &#39;hiphop&#39;, country: &#39;Ghana&#39;},
       {name: &#39;Stormzy&#39;, genre: &#39;hiphop&#39;, country: &#39;United Kingdom&#39;},
       {name: &#39;Lil Nas&#39;, genre: &#39;Country&#39;, country: &#39;United States&#39;},
       {name: &#39;Nasty C&#39;, genre: &#39;hiphop&#39;, country: &#39;South-Africa&#39;},
       {name: &#39;Shatta-walle&#39;, genre: &#39;Reagae&#39;, country: &#39;Ghana&#39;},
       {name: &#39;Khalid&#39;, genre: &#39;pop&#39;, country: &#39;United States&#39;},
       {name: &#39;ed-Sheeran&#39;, genre: &#39;pop&#39;, country: &#39;United Kingdom&#39;}
      ]
    }
  }
}
</script>

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

<template>
  <div>
    <h1 id="Vue-nbsp-Top-nbsp-Artist-nbsp-Countries">Vue Top Artist Countries</h1>
    <ul>
      <li v-for="(artist, x) in artists" :key="x">
      <h3 id="artist-name-nbsp-from-nbsp-artist-country">{{artist.name}} from {{artist.country}}</h3>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: &#39;Test2&#39;,
  data (){
    return {
      artists: [
       {name: &#39;Davido&#39;, genre: &#39;afrobeats&#39;, country: &#39;Nigeria&#39;},
       {name: &#39;Burna Boy&#39;, genre: &#39;afrobeats&#39;, country: &#39;Nigeria&#39;},
       {name: &#39;AKA&#39;, genre: &#39;hiphop&#39;, country: &#39;South-Africa&#39;},
       {name: &#39;Sarkodie&#39;, genre: &#39;hiphop&#39;, country: &#39;Ghana&#39;},
       {name: &#39;Stormzy&#39;, genre: &#39;hiphop&#39;, country: &#39;United Kingdom&#39;},
       {name: &#39;Lil Nas&#39;, genre: &#39;Country&#39;, country: &#39;United States&#39;},
       {name: &#39;Nasty C&#39;, genre: &#39;hiphop&#39;, country: &#39;South-Africa&#39;},
       {name: &#39;Shatta-walle&#39;, genre: &#39;Reagae&#39;, country: &#39;Ghana&#39;},
       {name: &#39;Khalid&#39;, genre: &#39;pop&#39;, country: &#39;United States&#39;},
       {name: &#39;ed-Sheeran&#39;, genre: &#39;pop&#39;, country: &#39;United Kingdom&#39;}
      ]
    }
  }
}
</script>
<style scoped>
li{
    height: 40px;
    width: 100%;
    padding: 15px;
    border: 1px solid saddlebrown;
    display: flex;
    justify-content: center;
    align-items: center;
  }  
a {
  color: #42b983;
}
</style>

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

<template>
  <div id="app">
    <img src="/static/imghwm/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo" >
    <Test/>
    <test2/>
  </div>
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
import Test2 from &#39;./components/Test2&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test, Test2
  }
}
</script>

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

npm run serve

应该是这样的：

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

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

解决方案：Vue道具

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

语法如下：

Vue.component(&#39;blog-post&#39;, {
  props: [&#39;title&#39;],
  template: &#39;<h3 id="nbsp-title-nbsp">{{ title }}</h3>&#39;
})

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

在父组件中定义数据

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

<script>
import Test from &#39;./components/Test.vue&#39;
import Test2 from &#39;./components/Test2&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test, Test2
  },
  data (){
    return {
      artists: [
       {name: &#39;Davido&#39;, genre: &#39;afrobeats&#39;, country: &#39;Nigeria&#39;},
       {name: &#39;Burna Boy&#39;, genre: &#39;afrobeats&#39;, country: &#39;Nigeria&#39;},
       {name: &#39;AKA&#39;, genre: &#39;hiphop&#39;, country: &#39;South-Africa&#39;},
       {name: &#39;Sarkodie&#39;, genre: &#39;hiphop&#39;, country: &#39;Ghana&#39;},
       {name: &#39;Stormzy&#39;, genre: &#39;hiphop&#39;, country: &#39;United Kingdom&#39;},
       {name: &#39;Lil Nas&#39;, genre: &#39;Country&#39;, country: &#39;United States&#39;},
       {name: &#39;Nasty C&#39;, genre: &#39;hiphop&#39;, country: &#39;South-Africa&#39;},
       {name: &#39;Shatta-walle&#39;, genre: &#39;Reagae&#39;, country: &#39;Ghana&#39;},
       {name: &#39;Khalid&#39;, genre: &#39;pop&#39;, country: &#39;United States&#39;},
       {name: &#39;Ed Sheeran&#39;, genre: &#39;pop&#39;, country: &#39;United Kingdom&#39;}
      ]
    }
  }
}
</script>

接收道具

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

<script>
export default {
  name: &#39;Test&#39;,
  props: [&#39;artists&#39;]
}

注册道具

要让vue引擎知道您有一些要动态传递给某些子组件的道具，必须在vue实例中指明它。这是在模板部分完成的，如下所示：

<template>
  <div id="app">
    <img src="/static/imghwm/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo" >
    <Test v-bind:artists="artists"/>
    <test2 v-bind:artists="artists"/>
  </div>
</template>

在这里，我们使用v-bind指令来绑定artists（脚本部分中数据对象数组的名称）和artists（测试组件中的道具名称），这是您在上面部分中设置的名称。在这种情况下，在没有如下指令的情况下设置：

<Test artists="artists"/>
    <test2 artists="artists"/>

您将看不到任何输出，Vue编译器甚至ESLint也不会将其标记为错误或警告，因此，请务必注意并记住对每个动态绑定使用V-Bind。

使用道具

设置好道具之后，就可以在组件中使用它，就像数据是在同一组件中定义的一样。这意味着您可以设置方法调用并在我们的演示案例中轻松访问this.artists。

强类型道具

您还可以通过强输入道具来确保组件只接收您希望它接收的数据类型。例如，在我们的演示中，通过设置如下身份验证，您可以确保只有数组才能传递到组件：

<script>
export default {
  name: &#39;Test&#39;,
  props: {
    artists: {
      type: Array
    }
  }
}
</script>

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

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

您可以在这里获得本教程的完整代码。

结论

在这篇文章中，我们研究了vue道具，以及它们如何通过创建一个数据对象可重用性平台来帮助鼓励dry（不要重复自己的做法）。我们还学习了如何在Vue项目中设置道具。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

以上是Vue.js中使用道具将数据传递到的子组件的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：logrocket。如有侵权，请联系admin@php.cn删除

了解vue.js：主要是前端框架Apr 17, 2025 am 12:20 AM

Vue.js是由尤雨溪在2014年发布的渐进式JavaScript框架，用于构建用户界面。它的核心优势包括：1.响应式数据绑定，数据变化自动更新视图；2.组件化开发，UI可拆分为独立、可复用的组件。

Netflix的前端：React（或VUE）的示例和应用Apr 16, 2025 am 12:08 AM

Netflix使用React作为其前端框架。1)React的组件化开发模式和强大生态系统是Netflix选择它的主要原因。2)通过组件化，Netflix将复杂界面拆分成可管理的小块，如视频播放器、推荐列表和用户评论。3)React的虚拟DOM和组件生命周期优化了渲染效率和用户交互管理。

前端景观：Netflix如何处理其选择Apr 15, 2025 am 12:13 AM

Netflix在前端技术上的选择主要集中在性能优化、可扩展性和用户体验三个方面。1.性能优化：Netflix选择React作为主要框架，并开发了SpeedCurve和Boomerang等工具来监控和优化用户体验。2.可扩展性：他们采用微前端架构，将应用拆分为独立模块，提高开发效率和系统扩展性。3.用户体验：Netflix使用Material-UI组件库，通过A/B测试和用户反馈不断优化界面，确保一致性和美观性。

React与Vue：Netflix使用哪个框架？Apr 14, 2025 am 12:19 AM

NetflixusesAcustomFrameworkcalled“ Gibbon” BuiltonReact，notReactorVueDirectly.1）TeamExperience：selectBasedAsedonFamiliarity.2）ProjectComplexity：vueforsimplerprojects，vueforsimplerprojects，reactforforforecomplexones.3）cocatizationNeedsneeds：reactofficatizationneedneeds：reactofferizationneedneedneedneeds：reactoffersizatization needeffersefersmoreflexiblesimore.4）ecosyaka

框架的选择：是什么推动了Netflix的决定？Apr 13, 2025 am 12:05 AM

Netflix在框架选择上主要考虑性能、可扩展性、开发效率、生态系统、技术债务和维护成本。1.性能与可扩展性：选择Java和SpringBoot以高效处理海量数据和高并发请求。2.开发效率与生态系统：使用React提升前端开发效率，利用其丰富的生态系统。3.技术债务与维护成本：选择Node.js构建微服务，降低维护成本和技术债务。

反应，vue和Netflix前端的未来Apr 12, 2025 am 12:12 AM

Netflix主要使用React作为前端框架，辅以Vue用于特定功能。1)React的组件化和虚拟DOM提升了Netflix应用的性能和开发效率。2)Vue在Netflix的内部工具和小型项目中应用，其灵活性和易用性是关键。

前端中的vue.js：现实世界的应用程序和示例Apr 11, 2025 am 12:12 AM

Vue.js是一种渐进式JavaScript框架，适用于构建复杂的用户界面。1)其核心概念包括响应式数据、组件化和虚拟DOM。2)实际应用中，可以通过构建Todo应用和集成VueRouter来展示其功能。3)调试时，建议使用VueDevtools和console.log。4)性能优化可通过v-if/v-show、列表渲染优化和异步加载组件等实现。