正文

在SPA中使用組件的局限性之一是你不能直接將數據從一個組件傳遞給另一個。基于組件的應用程序背后的想法是，每個組件都被封裝起來，并擁有它所需要的所有數據，以便工作；但有時，我們確實需要一個不同組件之間的溝通渠道。

這就是Vue.js道具的作用--它們允許你將任何類型的數據從父組件傳遞給子組件。與React的props工作方式類似，這可以通過在子組件上設置prop屬性，并從父組件中傳入所需的數據來實現。這個過程實際上是非常簡單的，但如果你以前沒有使用過Vue.js，還是會有點困惑的。

在這篇文章中，我們將看看如何在Vue.js中使用props，以及使用它們的一些好處。讓我們開始吧!

什么是Vue.js中的props？

Props是你可以在一個子組件上設置的屬性，以便以從上到下的方式傳遞數據。在Vue項目中，props是單向的：它們只從父組件向子組件發(fā)送數據。這意味著父組件負責設置道具，而子組件只負責接收道具。

道具也是反應式的：當父組件更新一個道具時，它也會自動在子組件上更新。這可能非常有用，因為它意味著你不必擔心讓兩個組件保持同步--它們總是自動更新。

那么，你為什么要使用props呢？

如果你已經使用過任何其他基于組件的框架，如Angular或React，你可能已經理解了父子溝通的需要。然而，如果你對這個概念不是很熟悉的話，有幾個原因可以說明你為什么要在Vue.js中使用props。

• 道具允許你保持你的組件的模塊化和可重復使用。
• 它們使你在應用程序的不同部分之間分享數據變得容易。
• 在Vue.js中，props是一種將反應式數據從父組件傳遞到子組件的簡單方法，有效地同步了它們。

如何在Vue.js中使用props？

我們已經說服了你對props的需求嗎？讓我們開始使用它們吧在第一個例子中，我們將看看如何使用傳統(tǒng)的Options API來設置props，這也是大多數生產項目中仍在使用的。在文章的后面，我們將看到如何用新的、閃亮的Composition API完成同樣的過程。

在Vue.js中使用道具其實很簡單：你只需要在子組件上設置道具屬性，并將你想要接收的數據以字符串的形式傳入。

例如，假設我們有一個叫做App的父組件，它渲染了一個叫做Child的子組件。我們想把一條信息從App 傳給Child，這樣Child 就可以顯示它。為了做到這一點，我們首先要在Child上設置 "消息 "道具，然后我們可以通過使用handlebars語法在我們的HTML中輸出它。

<!-- This is our child component -->
<script>
  export default {
    props: ['message']
  }
</script>
<template>
  <p>This is my message: {{message}}</p>
</template>

然后，我們在App 組件中使用v-bind屬性，添加實際的道具。作為縮寫，我們可以直接使用": "符號。

<!-- This is our parent component -->
<template>
  <ChildComponent :message="message" />
</template>
<script>
  export default {
    data() {
      return {
        message: "Hello World"
      }
    }
  }
</script>

這將直接把信息從App傳達給Child，有效地輸出以下文本。

This is my message: Hello World

如果我們想傳遞多個道具，過程非常相似：我們只需要在子組件中把它們設置成一個數組，像這樣。

<!-- This is our child component -->
<script>
  export default {
    props: ['message', 'name']
  }
</script>
<template>
  <p>{{message}}, {{name}}</p>
</template>

<!-- This is our parent component -->
<template>
  <ChildComponent :message="message" :name="name" />
</template>
<script>
  export default {
    data() {
      return {
        message: "Welcome",
        name: "Alex"
      }
    }
  }
</script>

這將輸出以下結果。

Welcome, Alex

這就是它的全部內容了!使用Options API設置道具是非常簡單和直接的。

在Vue中使用props與Composition API

現在讓我們看看同樣的過程在Composition API中是怎樣的。你會很快注意到，HTML方面的東西是完全一樣的；我們只需要重寫我們的JS代碼，以適應基于組合的項目中的新的做事方式。

因此，我們的子組件最終會是這樣的。

<!-- This is our child component -->
<script setup>
  defineProps(['message', 'name'])
</script>
<template>
  <p>{{message}}, {{name}}</p>
</template>

<!-- This is our parent component -->
<template>
  <ChildComponent :message="message" :name="name" />
</template>
<script setup>
import { ref } from "vue";
const message = ref("Welcome");
const name = ref("Alex");
</script>

在Vue.js項目中使用道具的最終想法

正如你所看到的，props是在Vue.js應用程序的不同部分之間共享數據的一種非常簡單而強大的方式。如果你還不相信它們的有用性，我們鼓勵你花點時間自己去試驗一下。

我們希望這篇文章能幫助你了解道具在Vue.js中的工作原理，更多關于Vue.js道具使用的資料請關注腳本之家其它相關文章！

最新評論