---
# System prepended metadata

title: 組件資料傳遞 props
tags: [Mike課程]

---

---
tags:  Mike課程
---

# 組件資料傳遞 props

### 父層傳遞給子層

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

```javascript=
setup() {
    const refGet = ref("Vue Go");
    return {
      refGet,
    };
  },
```
* 傳遞於子層標籤中:第一個 自訂的名稱、第二個傳遞的內容

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

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

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

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

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

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

```javascript=
  props: {
    msg: String,
  },
```
* 又或者可以更詳寫入需求。

```javascript=
 props: {
    msg: {
      typeof: String,
      default: "沒有值傳入",
    },
  },
```
<div class="alert alert-danger text-center" role="alert">
  要記得以v-bind 方式 :  才能綁定資料
</div>

