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

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

相关推荐：

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

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

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

以上是Vue.js中使用道具將資料傳遞到的子元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！