props를 사용하여 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

efficiency Issues

데이터 개체(예: 광고판 상위 10대 아티스트 목록)가 있는 경우 사용하려는 두 가지 구성 요소 표시되지만 방식이 매우 다르기 때문에 첫 번째 반응은 이러한 두 개의 독립 구성 요소를 만들고 데이터 개체에 배열을 추가한 다음 템플릿에 표시하는 것입니다.

이 솔루션은 매우 좋지만 구성 요소를 더 추가하면 비효율적인 솔루션이 됩니다. vs 코드에서 여는 starter 프로젝트를 사용하여 이를 보여드리겠습니다.

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/imghw/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道具

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

语法如下：

Vue.component('blog-post', {
  props: ['title'],
  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/imghw/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

🎜Demo🎜🎜
🎜🎜테스트용으로 열려 있습니다. vue 파일을 아래 코드 블록에 복사하세요. 🎜

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

🎜 Components 폴더에 새 파일을 만들고 이름을 test2.vue로 지정한 다음 아래 코드 블록을 해당 파일에 붙여넣으세요. 🎜

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

🎜새 파일을 등록하려면 방금 생성한 구성 요소에서 app.vue 파일을 열고 그 안에 다음 코드를 복사합니다. 🎜rrreee🎜VS Code 터미널에서 다음 명령을 사용하여 개발 환경에서 애플리케이션을 시작합니다. 🎜rrreee🎜는 다음과 같습니다. 이렇게: 🎜🎜 🎜🎜구성요소가 5개 정도 더 있으면 각 구성요소의 데이터를 계속 복사해야 하는 것을 볼 수 있습니다. 상위 구성 요소에서 데이터를 정의한 다음 속성 이름을 사용하여 이를 필요한 모든 하위 구성 요소로 가져오는 방법이 있다고 상상해 보세요. 🎜🎜🎜🎜해결책: Vue Props 🎜🎜🎜🎜Vue 팀은 모든 구성 요소에 등록할 수 있는 사용자 정의 속성인 props를 제공합니다. 작동 방식은 상위 구성 요소에 데이터를 정의하고 값을 지정한 다음 해당 데이터가 필요한 하위 구성 요소로 이동하여 해당 값을 prop 속성에 전달하여 데이터가 하위 구성 요소의 속성이 되도록 하는 것입니다. 🎜🎜구문은 다음과 같습니다. 🎜rrreee🎜루트 구성 요소(app.vue)를 상위 구성 요소로 사용하고 데이터를 저장한 다음 props를 등록하면 필요한 모든 구성 요소에서 이 데이터에 동적으로 액세스할 수 있습니다. 🎜🎜🎜🎜상위 구성 요소에서 데이터 정의🎜🎜🎜🎜루트 구성 요소를 상위 구성 요소로 선택한 후 먼저 루트 구성 요소 내에서 동적으로 공유할 데이터 개체를 정의해야 합니다. 이 게시물을 처음부터 따라하고 있다면 app.vue 파일을 열고 스크립트 섹션에서 데이터 개체 코드 블록을 복사하세요. 🎜rrreee🎜🎜🎜Receive props🎜🎜🎜🎜데이터를 정의한 후 두 개의 테스트 구성 요소로 이동합니다. 그 안에 있는 데이터 개체를 삭제합니다. 컴포넌트에서 props를 받으려면 해당 컴포넌트에서 받고 싶은 props를 지정해야 합니다. 두 개의 테스트 구성 요소로 이동하여 다음과 같이 스크립트 섹션에 사양을 추가합니다. 🎜rrreee🎜🎜🎜Register props🎜🎜🎜🎜 일부 하위 구성 요소에 동적으로 전달하려는 일부 props가 있음을 vue 엔진에 알리려면 다음을 수행해야 합니다. vue 인스턴스에 있어야 합니다. 이 작업은 아래와 같이 템플릿 섹션에서 수행됩니다. 🎜rrreee🎜여기서 v-bind 지시문을 사용하여 artists(스크립트 섹션에 있는 데이터 개체 배열의)를 바인딩합니다. name) 및 artists(테스트 구성 요소의 prop 이름)는 위 섹션에서 설정한 이름입니다. 이 경우 다음 지시문 없이 설정하세요. 🎜

<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道具，以及它们如何通过创建一个数据对象可重用性平台来帮助鼓励dry（不要重复自己的做法）。我们还学习了如何在Vue项目中设置道具。

相关推荐：

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

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

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

위 내용은 props를 사용하여 Vue.js의 하위 구성 요소에 데이터 전달의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!