In diesem Artikel schauen wir uns an, wie man in Vue.js Daten von der übergeordneten Komponente an die untergeordnete Komponente weitergibt. Dieser Artikel ist für Entwickler aller Stufen geeignet, auch für Anfänger.
Bevor wir beginnen
Wir können den Artikel „So verwenden Sie Ereignis-Emitter zum Ändern von Komponentendaten in Vue.js“ lesen der übergeordneten Komponente.
Bevor Sie diesen Artikel lesen, sollten Sie die folgenden Punkte bereits kennen.
Sie benötigen Folgendes auf Ihrem Computer:
- Node.js Version 10.x und höher installiert. Sie können überprüfen, ob es installiert ist, indem Sie den folgenden Befehl im Terminal/in der Eingabeaufforderung ausführen:
node -v
Nach dem Login kopieren
npm install -g @vue/cli
Nach dem Login kopieren
Laden Sie hier ein - Vue-Starterprojekt herunter
Entpacken Sie das heruntergeladene Projekt.npm install
Nach dem Login kopieren
EffizienzproblemeWenn Sie ein Datenobjekt haben (z. B. eine Billboard-Top-Ten-Künstlerliste), möchten Sie zwei verschiedene Komponenten verwenden werden angezeigt, allerdings auf sehr unterschiedliche Weise. Ihre erste Reaktion besteht also darin, diese beiden unabhängigen Komponenten zu erstellen, Arrays zum Datenobjekt hinzuzufügen und sie dann in der Vorlage anzuzeigen.
Diese Lösung ist sehr gut, aber wenn Sie weitere Komponenten hinzufügen, wird sie zu einer ineffizienten Lösung. Lassen Sie uns dies anhand eines Starter-Projekts demonstrieren, das Sie in vs-Code öffnen.
starter项目来演示这一点。
演示
打开测试。将vue文件复制到下面的代码块中:
<template>
<div>
<h1>Vue Top 20 Artists</h1>
<ul>
<li v-for="(artist, x) in artists" :key="x">
<h3>{{artist.name}}</h3>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Test',
data (){
return {
artists: [
{name: 'Davido', genre: 'afrobeats', country: 'Nigeria'},
{name: 'Burna Boy', genre: 'afrobeats', country: 'Nigeria'},
{name: 'AKA', genre: 'hiphop', country: 'South-Africa'},
{name: 'Sarkodie', genre: 'hiphop', country: 'Ghana'},
{name: 'Stormzy', genre: 'hiphop', country: 'United Kingdom'},
{name: 'Lil Nas', genre: 'Country', country: 'United States'},
{name: 'Nasty C', genre: 'hiphop', country: 'South-Africa'},
{name: 'Shatta-walle', genre: 'Reagae', country: 'Ghana'},
{name: 'Khalid', genre: 'pop', country: 'United States'},
{name: 'ed-Sheeran', genre: 'pop', country: 'United Kingdom'}
]
}
}
}
</script>Nach dem Login kopieren
在“组件”文件夹中创建一个新文件，将其命名为test2.vue并将下面的代码块粘贴到其中：
<template>
<div>
<h1>Vue Top Artist Countries</h1>
<ul>
<li v-for="(artist, x) in artists" :key="x">
<h3>{{artist.name}} from {{artist.country}}</h3>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Test2',
data (){
return {
artists: [
{name: 'Davido', genre: 'afrobeats', country: 'Nigeria'},
{name: 'Burna Boy', genre: 'afrobeats', country: 'Nigeria'},
{name: 'AKA', genre: 'hiphop', country: 'South-Africa'},
{name: 'Sarkodie', genre: 'hiphop', country: 'Ghana'},
{name: 'Stormzy', genre: 'hiphop', country: 'United Kingdom'},
{name: 'Lil Nas', genre: 'Country', country: 'United States'},
{name: 'Nasty C', genre: 'hiphop', country: 'South-Africa'},
{name: 'Shatta-walle', genre: 'Reagae', country: 'Ghana'},
{name: 'Khalid', genre: 'pop', country: 'United States'},
{name: 'ed-Sheeran', genre: 'pop', country: 'United Kingdom'}
]
}
}
}
</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>Nach dem Login kopieren
要注册刚创建的新组件，请打开app.vue文件并在其中复制以下代码：
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<Test/>
<test2/>
</div>
</template>
<script>
import Test from './components/Test.vue'
import Test2 from './components/Test2'
export default {
name: 'app',
components: {
Test, Test2
}
}
</script>Nach dem Login kopieren
使用VS代码终端中的此命令在开发环境中启动应用程序：
npm run serve
Nach dem Login kopieren
应该是这样的：
您可以看到，如果您还有大约五个组件，则必须继续复制每个组件中的数据。想象一下，如果有一种方法可以定义父组件中的数据，然后将其带到每个需要它的子组件中，并使用属性名。
解决方案：Vue道具
Vue团队提供了他们所称的道具，这些道具是可以在任何组件上注册的自定义属性。它的工作方式是在父组件上定义数据并给它一个值，然后转到需要该数据的子组件并将该值传递给prop属性，以便该数据成为子组件中的属性。
语法如下：
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})Nach dem Login kopieren
您可以使用根组件（app.vue）作为父组件并存储数据，然后注册道具从任何需要它的组件动态访问此数据。
在父组件中定义数据
选择根组件作为父组件后，必须首先定义要在根组件内动态共享的数据对象。如果您从一开始就关注这篇文章，请打开app.vue文件并在脚本部分中复制数据对象代码块：
<script>
import Test from './components/Test.vue'
import Test2 from './components/Test2'
export default {
name: 'app',
components: {
Test, Test2
},
data (){
return {
artists: [
{name: 'Davido', genre: 'afrobeats', country: 'Nigeria'},
{name: 'Burna Boy', genre: 'afrobeats', country: 'Nigeria'},
{name: 'AKA', genre: 'hiphop', country: 'South-Africa'},
{name: 'Sarkodie', genre: 'hiphop', country: 'Ghana'},
{name: 'Stormzy', genre: 'hiphop', country: 'United Kingdom'},
{name: 'Lil Nas', genre: 'Country', country: 'United States'},
{name: 'Nasty C', genre: 'hiphop', country: 'South-Africa'},
{name: 'Shatta-walle', genre: 'Reagae', country: 'Ghana'},
{name: 'Khalid', genre: 'pop', country: 'United States'},
{name: 'Ed Sheeran', genre: 'pop', country: 'United Kingdom'}
]
}
}
}
</script>Nach dem Login kopieren
接收道具
定义数据之后，进入两个测试组件并删除其中的数据对象。要在组件中接收道具，必须指定要在该组件中接收的道具。进入两个测试组件，在脚本部分添加规范，如下所示：
<script>
export default {
name: 'Test',
props: ['artists']
}Nach dem Login kopieren
注册道具
要让vue引擎知道您有一些要动态传递给某些子组件的道具，必须在vue实例中指明它。这是在模板部分完成的，如下所示：
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<Test v-bind:artists="artists"/>
<test2 v-bind:artists="artists"/>
</div>
</template>Nach dem Login kopieren
在这里，我们使用v-bind指令来绑定artists（脚本部分中数据对象数组的名称）和artists
Demo🎜🎜
🎜🎜Zum Testen geöffnet. Kopieren Sie die Vue-Datei in den Codeblock unten: 🎜
<Test artists="artists"/>
<test2 artists="artists"/>Nach dem Login kopieren
Nach dem Login kopieren
🎜 Erstellen Sie eine neue Datei im Komponentenordner, nennen Sie sie
test2.vue und fügen Sie den Codeblock unten ein: 🎜
<script>
export default {
name: 'Test',
props: {
artists: {
type: Array
}
}
}
</script>Nach dem Login kopieren
Nach dem Login kopieren
🎜Um das Neue zu registrieren Komponente, die Sie gerade erstellt haben, öffnen Sie die Datei
app.vue und kopieren Sie den folgenden Code hinein: 🎜rrreee🎜Starten Sie die Anwendung in der Entwicklungsumgebung mit diesem Befehl im VS Code-Terminal: 🎜rrreee🎜 sollte aussehen so: 🎜🎜
🎜🎜Sie können sehen, dass Sie bei etwa fünf weiteren Komponenten die Daten in jeder Komponente ständig kopieren müssen. Stellen Sie sich vor, es gäbe eine Möglichkeit, Daten in einer übergeordneten Komponente zu definieren und sie dann mithilfe des Eigenschaftsnamens zu jeder untergeordneten Komponente zu übertragen, die sie benötigt. 🎜🎜🎜🎜Lösung: Vue Props 🎜🎜🎜🎜Das Vue-Team stellt sogenannte Props bereit, bei denen es sich um benutzerdefinierte Eigenschaften handelt, die auf jeder Komponente registriert werden können. Die Funktionsweise besteht darin, dass Sie Daten für die übergeordnete Komponente definieren und ihr einen Wert zuweisen. Gehen Sie dann zur untergeordneten Komponente, die diese Daten benötigt, und übergeben Sie diesen Wert an das Prop-Attribut, sodass die Daten zu einer Eigenschaft in der untergeordneten Komponente werden. 🎜🎜Die Syntax lautet wie folgt: 🎜rrreee🎜Sie können die Stammkomponente (app.vue) als übergeordnete Komponente verwenden und die Daten speichern und dann Requisiten registrieren, um von jeder Komponente, die sie benötigt, dynamisch auf diese Daten zuzugreifen. 🎜🎜🎜🎜Daten in der übergeordneten Komponente definieren🎜🎜🎜🎜Nachdem Sie die Stammkomponente als übergeordnete Komponente ausgewählt haben, müssen Sie zunächst die Datenobjekte definieren, die innerhalb der Stammkomponente dynamisch gemeinsam genutzt werden sollen. Wenn Sie diesen Beitrag von Anfang an verfolgen, öffnen Sie die Datei app.vue und kopieren Sie den Datenobjekt-Codeblock in den Skriptabschnitt: 🎜rrreee🎜🎜🎜Receive props🎜🎜🎜🎜Nach dem Definieren der Daten gehen Sie zu den beiden Testkomponenten und löschen Sie die darin enthaltenen Datenobjekte. Um Requisiten in einer Komponente zu empfangen, müssen Sie die Requisiten angeben, die Sie in dieser Komponente empfangen möchten. Gehen Sie in die beiden Testkomponenten und fügen Sie im Skriptabschnitt wie folgt Spezifikationen hinzu: 🎜rrreee🎜🎜🎜Requisiten registrieren🎜🎜🎜🎜Um der Vue-Engine mitzuteilen, dass Sie einige Props haben, die Sie dynamisch an einige Unterkomponenten übergeben möchten, müssen diese vorhanden sein Seien Sie in der Vue-Instanz und geben Sie es an. Dies geschieht im Vorlagenabschnitt wie unten gezeigt: 🎜rrreee🎜Hier verwenden wir die
v-bind-Direktive, um die
artists (des Datenobjektarrays im Skriptabschnitt) zu binden name) und
artists (der Name der Requisite in der Testkomponente), wobei es sich um den Namen handelt, den Sie im obigen Abschnitt festgelegt haben. Stellen Sie in diesem Fall ohne eine Anweisung wie diese ein: 🎜
<Test artists="artists"/>
<test2 artists="artists"/>Nach dem Login kopieren
Nach dem Login kopieren
您将看不到任何输出，Vue编译器甚至ESLint也不会将其标记为错误或警告，因此，请务必注意并记住对每个动态绑定使用V-Bind。
使用道具
设置好道具之后，就可以在组件中使用它，就像数据是在同一组件中定义的一样。这意味着您可以设置方法调用并在我们的演示案例中轻松访问this.artists。
强类型道具
您还可以通过强输入道具来确保组件只接收您希望它接收的数据类型。例如，在我们的演示中，通过设置如下身份验证，您可以确保只有数组才能传递到组件：
<script>
export default {
name: 'Test',
props: {
artists: {
type: Array
}
}
}
</script>Nach dem Login kopieren
Nach dem Login kopieren
因此，每当您添加了一个错误的类型say string时，您将在控制台中收到一个警告，告诉您它得到的类型不是预期的类型。
您可以在这里获得本教程的完整代码。
结论
在这篇文章中，我们研究了vue道具，以及它们如何通过创建一个数据对象可重用性平台来帮助鼓励dry（不要重复自己的做法）。我们还学习了如何在Vue项目中设置道具。
相关推荐：
2020年前端vue面试题大汇总（附答案）
vue教程推荐：2020最新的5个vue.js视频教程精选
更多编程相关知识，请访问：编程入门！！
Das obige ist der detaillierte Inhalt vonVerwenden von Requisiten zum Übergeben von Daten an Unterkomponenten in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
