正文

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

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

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

什么是Vue.js中的props？

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

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

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

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

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

如何在Vue.js中使用props？

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

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

例如，假設我們有一個叫做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

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

<!-- 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>

這將輸出以下結(jié)果。

Welcome, Alex

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

在Vue中使用props與Composition API

現(xiàn)在讓我們看看同樣的過程在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應用程序的不同部分之間共享數(shù)據(jù)的一種非常簡單而強大的方式。如果你還不相信它們的有用性，我們鼓勵你花點時間自己去試驗一下。

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