怎么在Vue.js中使用props

這篇文章主要介紹“怎么在Vue.js中使用props”，在日常操作中，相信很多人在怎么在Vue.js中使用props問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么在Vue.js中使用props”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

Vue.js 中的 Props 是什么？

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

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

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

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

現在讓我們平衡一下——父組件將 props 傳遞給子組件，而子組件向父組件發出事件。

如何在組件內注冊道具

現在讓我們看看如何在組件中注冊 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，我們可以在我們的應用程序的模板部分調用它。

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

如何使用多個道具

你可以通過將它們附加到 props 數組來擁有多個 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 類型，您將使用對象而不是數組。您將使用屬性名稱作為每個屬性的鍵，使用類型作為值。

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

• 字符串

• 號碼

• 布爾值

• 數組

• 對象

• 日期

• 功能

• 符號

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 中將數據傳遞給 props

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

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

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

或作為這樣的靜態值：

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

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

這是父組件：

<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" :>{{name}}</button>
</template>
<script>
export default {
  name: 'Button',
  props:{
    name:String,
    bgColor:String
  }
}
</script>

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

注意：您還可以在 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數據屬性。如果是true，發送的數據應該是Logout， 否則應該是Login。

如何將函數傳遞給 props

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

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

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

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

如何在 Vue 中驗證 props

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

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

如何設置默認道具值

在結束本文之前，讓我們現在看看如何為我們的道具設置默認值。如果子組件無法從父組件獲取數據，則呈現默認值。

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

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

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

到此，關于“怎么在Vue.js中使用props”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！