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

發表於 更新於 分類於
說明 props 向內層元件傳入資料

Props 說明

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

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

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

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

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

沒有使用 v-bind 帶入的 props 都會被視為字串

1
<BlogPost title="My journey with Vue" />

單向資料流的概念

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

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

為什麼使用單向資料流

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

想修改props的解法

有兩種情況會想直接修改 porps 的值:

  1. 當 props 被傳入當作元件初始值時，這種情形應該在子元件內用 data 去接收 props，避免直接修改 props。
1
2
3
4
5
6
7
8
9
10
export default {
  props: ['initialCounter'],
  data() {
    return {
      // counter only uses this.initialCounter as the initial value;
      // it is disconnected from future prop updates.
      counter: this.initialCounter
    }
  }
}
  1. 傳入的 props 需要被加工處理時，可以用 computed 處理 props
1
2
3
4
5
6
7
8
9
export default {
  props: ['size'],
  computed: {
    // computed property that auto-updates when the prop changes
    normalizedSize() {
      return this.size.trim().toLowerCase()
    }
  }
}

props 命名規則

  • 在 JavaScript 中使用駝峰命名法（camelCase）。
  • 在模板（HTML）中使用短橫線命名法（kebab-case）。
1
2
3
4
5
6
7
8
9
// 在 JavaScript 中
props: {
  userName: {
    type: String,
    required: true
  }
}
<!-- 在模板中 -->
<ChildComponent :user-name="userName" />

props 的型別

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

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

  • 型別檢查

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

基本類型檢查

1
2
3
4
5
6
7
props: {
  userName: String,
  userAge: Number,
  isVisible: Boolean,
  items: Array,
  userData: Object
}

更詳細的類型檢查

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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 {};
    }
  },
  // Custom validator function
  // full props passed as 2nd argument in 3.4+
  propG: {
    validator(value, props) {
      // The value must match one of these strings
      return ['success', 'warning', 'danger'].includes(value)
    }
  },
}

多種類型檢查

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

1
2
3
props: {
  value: [String, Number]
}

Boolean Casting

當 props 為 Boolean 時，會有不同的運行方式如:

1
2
3
4
5
export default {
  props: {
    disabled: Boolean
  }
}

在畫面上

1
2
3
4
5
<!-- equivalent of passing :disabled="true" -->
<MyComponent disabled />

<!-- equivalent of passing :disabled="false" -->
<MyComponent />