---
tags: Mike課程
---

# 組件資料傳遞 props

### 父層傳遞給子層

* 我們定義一個傳遞的資料

setup() {
    const refGet = ref("Vue Go");
    return {
      refGet,
    };
  },

* 傳遞於子層標籤中:第一個 自訂的名稱、第二個傳遞的內容

<!-- 
:mass :自訂名稱 = "傳遞內容"

-->
<PropsText :mess="refGet" />

### 子層接收
* props 賦予一個陣列，內容接收父層自訂義名稱 props: ["msg"]。
* 再用setup架構 回傳 props內容使用。

<script>
export default {
  props: ["msg"],
  setup(props) {
    return {
      props,
    };
  },
};
</script>

<template>
  <h1>{{ props.msg }}</h1>
</template>

### props 接收的類別
* 在props為了避免傳遞錯誤，我們可以使用物件定義資料類別來做傳遞。

  props: {
    msg: String,
  },

* 又或者可以更詳寫入需求。

 props: {
    msg: {
      typeof: String,
      default: "沒有值傳入",
    },
  },

<div class="alert alert-danger text-center" role="alert">
要記得以v-bind 方式 : 才能綁定資料
</div>