如何在 Vue.js 中使用 props

拖延俱樂部 2021-08-25 13:46:30 瀏覽數(shù) (5281)

反饋

我們使用 props 將信息/數(shù)據(jù)從父組件傳遞到子組件。在這篇文章中，我將解釋你需要知道的關于 props 的一切，以及為什么你應該在 Vue.js 中使用 props。

以下是我們將在本指南中涵蓋的內(nèi)容的簡要概述：

Vue.js 中的 props 是什么？
如何在組件內(nèi)注冊 props
如何使用多個props
Vue.js 組件類型
如何將數(shù)據(jù)傳遞給 props
如何將函數(shù)傳遞給 props
如何驗證props
如何為 props 設置默認值

Vue.js 中的 Props 是什么？

“Props”是一個特殊的關鍵字，代表屬性。它可以在組件上注冊以將數(shù)據(jù)從父組件傳遞到其子組件之一。

與在 Vue.js 應用程序中使用像 vuex 這樣的狀態(tài)管理庫相比，這要容易得多。

props 中的數(shù)據(jù)只能以一種方式流動——從頂部或父組件，到底部或子組件。這只是意味著您不能將數(shù)據(jù)從子級傳遞給父級。

要記住的另一件事是 Props 是只讀的，不能被子組件修改，因為父組件“擁有”該值。

現(xiàn)在讓我們平衡一下——父組件將 props 傳遞給子組件，而子組件向父組件發(fā)出事件。

如何在組件內(nèi)注冊道具

現(xiàn)在讓我們看看如何在組件中注冊 props。

Vue.component('user-detail', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})
.js

或者，在 Vue 單文件組件中：

<template>
  <p>{{ name }}</p>
</template>

<script>
export default {
  props: ['name']
}
</script>

在上面的代碼中，我們注冊了一個名為的道具name，我們可以在我們的應用程序的模板部分調(diào)用它。

注意：這是子組件，這個道具將從父組件接收數(shù)據(jù)。稍后我將詳細解釋這一點。

如何使用多個道具

你可以通過將它們附加到 props 數(shù)組來擁有多個 prop，就像這樣：

Vue.component('user-detail', {
  props: ['firstName', 'lastName'],
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

或者，在 Vue 單文件組件中：

<template>
  <p>Hi {{ firstName }} {{ lastName }}</p>
</template>

<script>
export default {
  props: [
    'firstName', 
    'lastName'
  ],
}
</script>

Vue.js 道具類型

要指定要在 Vue 中使用的 prop 類型，您將使用對象而不是數(shù)組。您將使用屬性名稱作為每個屬性的鍵，使用類型作為值。

如果傳遞的數(shù)據(jù)類型與 prop 類型不匹配，Vue 會在控制臺中發(fā)送警報（在開發(fā)模式下）并帶有警告。您可以使用的有效類型是：

字符串
號碼
布爾值
數(shù)組
對象
日期
功能
符號

Vue.component('user-detail', {
  props: {
    firstName: String,
    lastName: String
  },
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

或者，在 Vue 單文件組件中：

<template>
  <p>Hi {{ firstName }} {{ lastName }}</p>
</template>

<script>
export default {
  props: {
    firstName: String,
    lastName: String
  },
}
</script>

如何在 Vue 中將數(shù)據(jù)傳遞給 props

使用 props 的主要目標是傳遞數(shù)據(jù)/信息。您可以使用 v-bind 將您的值作為數(shù)據(jù)屬性傳遞，例如在此代碼中：

<template>
  <ComponentName :title=title />
</template>

<script>
export default {
  //...
  data() {
    return {
      title: 'Understanding Props in vuejs'
    }
  },
  //...
}
</script>

或作為這樣的靜態(tài)值：

<ComponentName title="Understanding Props in vuejs" />

假設我們正在構(gòu)建一個應用程序，其中包含許多具有不同文本/背景顏色的按鈕。與其在我們的所有文件中重復按鈕語法，不如創(chuàng)建一個按鈕組件，然后將文本/背景顏色作為道具傳遞。

這是父組件：

<template>
  <div id="app">
    <Button :name='btnName' bgColor='red' />
    <Button :name='btnName' bgColor='green' />
    <Button :name='btnName' bgColor='blue' />
  </div>
</template>

<script>
import Button from './components/Button'

export default {
  name: 'App',
  data(){
    return{
      btnName:"Joel",
    }
  },
  components: {
    Button
  }
}
</script>

這是子組件：

<template>
  <button class="btn" :style="{backgroundColor:bgColor}">{{name}}</button>
</template>
<script>
export default {
  name: 'Button',
  props:{
    name:String,
    bgColor:String
  }
}
</script>

上面的代碼向您展示了當您從父組件獲取數(shù)據(jù)并在子組件中使用該數(shù)據(jù)時如何使用數(shù)據(jù)屬性和靜態(tài)值。

注意：您還可以在 prop 值中使用三元運算符來檢查真實條件并傳遞依賴于它的值。

<template>
  <div id="app">
    <Button :tagUser="signedUp ? 'Logout' : 'Login'" bgColor='red' />
  </div>
</template>
<script>
import Button from './components/Button'
export default {
  name: 'App',
  data(){
    return{
      signedUp: true,
    }
  },
  components: {
    Button
  }
}
</script>

在上面的代碼中，我們正在檢查signedUp數(shù)據(jù)屬性。如果是true，發(fā)送的數(shù)據(jù)應該是Logout，否則應該是Login。

如何將函數(shù)傳遞給 props

將函數(shù)或方法作為 prop 傳遞給子組件相對簡單。它與傳遞任何其他變量的過程基本相同。

但是你不應該使用 props 作為函數(shù)是有原因的——你應該使用emit。

<template>
  <ChildComponent :function="newFunction" />
</template>

<script>
export default {
  methods: {
    newFunction() {
      // ...
    }
  }
};
</script>

如何在 Vue 中驗證 props

Vue 讓驗證 props 變得非常容易。您所要做的就是將所需的鍵及其值添加到道具中。我們可以使用 prop 類型和使用來驗證required：

props: {
  name: {
    type: String,
    required: true
  }
}

如何設置默認道具值

在結(jié)束本文之前，讓我們現(xiàn)在看看如何為我們的道具設置默認值。如果子組件無法從父組件獲取數(shù)據(jù)，則呈現(xiàn)默認值。

Vue 允許你指定一個默認值，就像我們required之前指定的那樣。

props: {
  name: {
    type: String,
    required: true,
    default: 'John Doe'
  },
  img: {
    type: String,
    default: '../image-path/image-name.jpg',
   },
}

您還可以將默認值定義為對象。它可以是一個返回適當值的函數(shù)，而不是實際值。