vue (10) vue props 外層傳入資料

Props 說明

當外部元件想將資料傳入內部元件時，可以用 props

<photo :url="imgUrl"></photo>

在元件上使用 v-bind 動態將外層資料傳入 photo 元件內

app.component('photo', {
  template: `<img :src="url" class="img-thumbnail" alt>`,
  props: ['url'],
});

在內元件使用 props 屬性來接收資料，這邊我們使用陣列帶入 props 名稱。

單向資料流的概念

在 Vue.js 中，props（屬性）是父組件向子組件傳遞數據的主要方式。這個過程遵循單向資料流的原則，即數據只能從父組件傳遞到子組件，而不能反向傳遞。

1. 數據源於父組件：父組件通過 props 將數據傳遞給子組件。
2. 子組件接收數據：子組件接收這些 props 並將其作為自己的本地數據來使用。
3. 禁止修改 props：子組件不能直接修改從父組件接收到的 props。如果子組件需要修改數據，它應該通過向父組件發出事件請求父組件來改變數據，從而保持數據流的單向性。

為什麼使用單向資料流

1. 數據管理簡單：單向資料流使得數據流動方向清晰可見，易於追蹤和管理。
2. 狀態同步：父組件是數據的唯一來源，避免了多個組件之間的數據同步問題。
3. 易於調試：因為數據流向單一且明確，調試起來更為簡單。

props 命名規則

• 在 JavaScript 中使用駝峰命名法（camelCase）。
• 在模板（HTML）中使用短橫線命名法（kebab-case）。

// 在 JavaScript 中
props: {
  userName: {
    type: String,
    required: true
  }
}
<!-- 在模板中 -->
<ChildComponent :user-name="userName" />

props 的型別

<props-type money="true"></props-type> // 字串型別
<props-type :money="money"></props-type>

當沒有使用 v-bind的方式傳入值時，傳入的一律為字串型別。若用v-bind 傳入時，則看傳入的變數是什麼型別。

• 型別檢查

在內部元件可以對傳入的 props 做型別檢查。

基本類型檢查

props: {
  userName: String,
  userAge: Number,
  isVisible: Boolean,
  items: Array,
  userData: Object
}

更詳細的類型檢查

使用對象語法來提供更詳細的配置，例如，指定 prop 是否是必需的，並提供默認值：

props: {
  userName: {
    type: String,
    required: true
  },
  userAge: {
    type: Number,
    default: 25
  },
  isVisible: {
    type: Boolean,
    default: true
  },
  items: {
    type: Array,
    default() {
      return [];
    }
  },
  userData: {
    type: Object,
    default() {
      return {};
    }
  }
}

多種類型檢查

有時候，一個 prop 可以接受多種不同類型的值，這時可以使用數組來指定多種類型：

props: {
  value: [String, Number]
}