[Day23]元件的屬性定義

2023 iThome 鐵人賽

DAY 23

自我挑戰組

從零開始Vue(View)系列第 23 篇

15th鐵人賽

yuuu

2023-09-27 21:42:29

240 瀏覽

分享至

屬性定義（props）

在Vue.js中，可以使用元件的屬性（props）來向子元件傳遞數據，使父元件可以將數據傳遞給子元件，子元件則可以根據這些屬性來顯示相應的內容。
語法：

props:[
	'屬性1','屬性2',.....
],

而這種定義的方式，父層雖然可以傳任何資料類型的值給元件，但無法對資料進行驗證或是給適當的預設值，所以Vue提供進階定義的方式
進階定義：

props:{
    屬性名稱:{
        //資料型態
        type:String/Number,
        
        //預設值
        default:預設值,
        
        //父層是否必須給值
        required:true/false,
        
        //驗證父層給的值
        validator:funtion(value){
            ..........
            return true/false
        }
    }
}

type：未定義資料型態時，可帶入任何資料型態的值。
default：當父層使用元件時，未在元件屬性給值，元件將帶入預設值。
required：沒有設定的話，預設為false，代表父層可不賦值。相反為true，父層必須賦值。
validator：使用callback function定義，回應必須為boolean值。

範例
目標：讓父元件的訊息傳遞到子元件並顯示。
ParentComponent.vue

<template>
  <div>
    <h1>父元件</h1>
    <p>父元件的訊息：{{ parentMessage }}</p>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentMessage: '這是從父元件傳遞的訊息'
    };
  },
  components: {
    'child-component': ChildComponent
  }
};
</script>

ChildComponent.vue

<template>
  <div>
    <h2>子元件</h2>
    <p>接收到的訊息：{{ message }}</p>
  </div>
</template>

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

main.js

import { createApp } from 'vue';
import ParentComponent from './ParentComponent.vue';

var app = createApp({
  // ...其他配置
});

app.component('parent-component', ParentComponent);
app.mount('#app');

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Vue 3 Props 範例</title>
</head>
<body>
    <div id="app">
        <parent-component></parent-component>
    </div>
    <script src="path/to/your/vue.js"></script>
    <script src="path/to/your/main.js"></script>
</body>
</html>

也可以都在html裡，只是這樣比較難管理元件及重複利用

    <div id="app">
        <parent-component></parent-component>
    </div>

<script>
  // 子元件
  var ChildComponent = {
      props: ['message'],
      template: `
         <div>
           　<h2>子元件</h2>
             <p>接收到的訊息：{{ message }}</p>
         </div>
      `
  };

  // 父元件
  var ParentComponent = {
      data() {
         return {
            parentMessage: '這是從父元件傳遞的訊息'
         };
      },
      components: {
         'child-component': ChildComponent
            },
         template: `
         <div>
            <h1>父元件</h1>
            <p>父元件的訊息：{{ parentMessage }}</p>
            <child-component :message="parentMessage"></child-component>
         </div>
         `
      };

   var app = Vue.createApp({
       components: {
          'parent-component': ParentComponent
       }
   });

   app.mount('#app');
</script>

執行結果：

說明：
創建兩個元件，分別為父元件（ParentComponent）及子元件（ChildComponent）。

父元件：
在父元件裡定義要傳送的資料（parentMessage）。
在components屬性中，將子元件ChildComponent註冊為父元件的子元件（child-component）。
使用自訂元件＜child-component＞來渲染子元件，並通過 :message="parentMessage" 屬性將 parentMessage 傳遞給子元件。

子元件：
使用props接收父元件的資料（message），並綁定至HTML顯示資料。