正文

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

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

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

什么是Vue.js中的props？

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

道具也是反應(yīng)式的：當(dāng)父組件更新一個(gè)道具時(shí)，它也會自動(dòng)在子組件上更新。這可能非常有用，因?yàn)樗馕吨悴槐負(fù)?dān)心讓兩個(gè)組件保持同步--它們總是自動(dòng)更新。

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

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

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

如何在Vue.js中使用props？

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

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

例如，假設(shè)我們有一個(gè)叫做App的父組件，它渲染了一個(gè)叫做Child的子組件。我們想把一條信息從App 傳給Child，這樣Child 就可以顯示它。為了做到這一點(diǎn)，我們首先要在Child上設(shè)置 "消息 "道具，然后我們可以通過使用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屬性，添加實(shí)際的道具。作為縮寫，我們可以直接使用": "符號。

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

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

This is my message: Hello World

如果我們想傳遞多個(gè)道具，過程非常相似：我們只需要在子組件中把它們設(shè)置成一個(gè)數(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設(shè)置道具是非常簡單和直接的。

在Vue中使用props與Composition API

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

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

<!-- 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項(xiàng)目中使用道具的最終想法

正如你所看到的，props是在Vue.js應(yīng)用程序的不同部分之間共享數(shù)據(jù)的一種非常簡單而強(qiáng)大的方式。如果你還不相信它們的有用性，我們鼓勵(lì)你花點(diǎn)時(shí)間自己去試驗(yàn)一下。

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

最新評論