Vue 道具指南

簡介

Vue 是一個 JavaScript 框架，允許開發人員創建 組件 用於將用戶界面劃分為更小的部分，而不是在單個文件中構建整個 UI。使用組件時，我們可能希望在某些時候將數據從父組件傳遞到子組件，這通常通過 properties 來完成 ，也稱為道具 .

什麼是道具？

道具 在 Vue 中使用組件時，它可能是一個需要理解的關鍵概念。道具，代表屬性 ，使我們能夠將數據和功能從一個組件傳遞到另一個組件。重要的是要了解 props 數據流是單向的 - 我們只能將數據從父組件傳遞到子組件，而不是其他方式。

注意： 道具是只讀的 ，這意味著子組件不能修改它們，因為數據歸父組件所有，只傳遞給子組件讀取。

在 Vue 中聲明 Props

註冊道具很簡單；我們所要做的就是將它添加到 props <scripts> 中的數組 標籤。然後，我們可以在我們應用的 <template> 中使用它 部分。這發生在子組件中，其中數據是從父組件接收的：

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

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

這是單個文件組件 句法。或者，您可以通過以下方式為特定組件註冊道具：

Vue.component('user-profile', {
  props: ['name'],
  template: '<p>My name is {{ name }}</p>'
});

在 Vue 中聲明多個道具

props 是一個數組 - 您可以添加任意數量的數組：

<template>
  <p>My name is {{ name }} and I am {{ age }} years.</p>
</template>

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

道具值類型

到目前為止，我們只傳遞了字符串值，但實際上，任何數據類型都可以作為 prop 傳遞——包括數字、對象、數組、布爾值、方法、日期等等。

注意： 當我們使用靜態方法傳遞數字、對象、數組和布爾值時，我們必須綁定它們以告訴 Vue 這是一個 JavaScript 表達式而不是字符串（匹配方法的名稱）。

因此，為了傳遞它們，我們將它們作為 JavaScript 表達式 傳遞 （用引號括起來），它被評估為正確的數據類型隱式 ：

<template>
  <UserProfile :age="22" />
  <UserProfile :married="false" />
  <UserProfile :hobbies="['Singing', 'Gaming', 'Reading']" />
  <UserProfile
    :name="{
      firstName: 'John',
      lastName: 'Doe'
    }"
    />
</template>

但是，隱式轉換在實際設置中並非沒有錯誤。在大多數情況下 - 您需要明確指定類型。

明確指定道具類型

知道我們可以將任何類型的數據作為 prop 傳遞，最佳實踐是通過將它們聲明為 object 的一部分來指定我們想要使用的 prop 類型 而不是數組，並明確指定該值的類型。這很有用，因為如果傳遞的數據類型與指定的道具類型不匹配，Vue 會向控制台發送警告警報（在開發模式下）：

<template>
  <p>My name is {{ name }} and I am {{ age }} years.</p>
</template>

<script>
export default {
  props: {
    name: String,
    age: Number,
  }
}
</script>

將道具傳遞給組件

在 Vue 中將 props 傳遞給組件類似於將 HTML 屬性傳遞給 HTML 標籤，並且可以接受所有類型的數據，包括方法。例如，如果我們有一個配置文件組件，並且想將用戶詳細信息傳遞給用戶組件，我們可以這樣做：

<template>
  <UserProfile
        v-bind:name="user.name"
        :img="user.image"
  />
</template>

靜態和動態道具

Props 可以通過以下兩種方式之一傳遞：作為靜態值或作為動態值。靜態，我們的意思是這些值直接傳遞到組件中，而不需要 v-bind 或 : （分號）：

<template>
  <UserProfile name="John Doe" />
</template>

而對於動態值，我們使用 v-bind 或其: 快捷方式：

<template>
  <UserProfile :name=name />
</template>

<script>
export default {
  <!-- ... -->
  data() {
    return {
      name: 'John Doe'
    }
  },
  <!-- ... -->
}
</script>

動態值可以繼承自 data() 我們組件腳本的選項。

使用三元運算符傳遞道具

通常我們希望根據條件的值傳遞不同的數據。在這種情況下，三元運算符 派上用場了，因為我們可以在 prop 值中使用它：

<template>
  <div id="app">
    <Home :title="isHomepage? 'Welcome to the homepage' : 'This is not the Homepage'" />
  </div>
</template>

<script>
import Home from './components/Home'
export default {
  <!-- ... -->
  data(){
    return{
      isHomepage: true,
    }
  },
  components: {
    Home
  }
}
</script>

在這個例子中，我們檢查了 loggedIn 值 - 因為它是 true （用戶已經登錄）生成的道具值將是 Log Out .

作為道具傳遞方法

也可以將方法作為 props 傳遞給子組件，其工作方式類似於傳遞其他數據類型：

<template>
  <ChildComponent :method="myFunction" />
</template>

<script>
export default {
  <!-- ... -->
  methods: {
    myFunction() {
      <!-- ... -->
    }
  }
};
</script>

使用道具

如前所述，使用 props 的主要目標是傳遞數據。假設我們正在構建一個將顯示用戶詳細信息的應用程序 - 我們更願意創建可重用的組件，以便我們可以將這些數據作為道具傳遞，而不是為每個用戶手動創建單獨的組件。讓我們為該應用創建一個父組件：

<template>
  <div id="app">
    <UserProfile :name='userName' age='22' />
    <UserProfile :name='userName' age='18' />
    <UserProfile :name='userName' age='27' />
  </div>
</template>

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

export default {
  <!-- ... -->
  data(){
    return{
      userName:"John Doe",
    }
  },
  components: {
    UserProfile
  }
}
</script>

下面是子組件的外觀：

免費電子書：Git Essentials

查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！

<template>
  <div>
    <h2>My name is {{name}} and I am {{age}} years old.</h2>
  </div>
</template>

<script>
export default {
  <!-- ... -->
  props:{
    name:String,
    age:Number,
  }
}
</script>

驗證道具

之前我們看到添加 prop 類型有助於檢查 props 返回的數據類型，這是對 props 進行驗證的一種方式，但我們也可以在 props 中添加所需的 key 及其值，如下所示：

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

設置默認道具值

在某些情況下，我們可能希望設置默認值，以便在子組件無法從父組件獲取數據時，可以渲染此類數據：

props: {
  studentUserName: {
    type: String,
    required: true,
    default: "student##"
  },
  studentPassword: {
    type: String,
    required: true,
    default: "password123"
  },
  userImg: {
    type: String,
    default: "../default-avatar.jpg"
  },
},

注意： 默認值也可以是返回值的對像或方法。

結論

在使用組件時，道具是 Vue 的重要組成部分。在本文中，我們了解了 props 是什麼，如何在 Vue 中使用它們，如何聲明和註冊它們，設置默認值，驗證它們等。