Vue－傳遞資料的好夥伴（props）

前端框架必備功能。

簡述

props 大概是前端框架中很常見的術語，就算你沒有用過應該也聽過它，所以這邊就稍微過一下。

假設我有一個 Modal 元件，我希望他的內容是從父層傳下來的，那就會這樣做：

<!-- App.vue -->
<template>
  <div class="container">
    ...
  </div>
   <!-- :user = 我們要傳進去的 props -->
  <Modal :user="user" />
</template>

<script>
import Modal from './components/Modal.vue'

export default {
  name: 'App',
  components: {
    Modal
  },
  data() {
    return {
      // props 綁定的資料
      user: {
        name: 'PeaNu',
        email: 'PeaNug@peanu.dev'
      }
    }
  }
}

<!-- Modal.vue -->
<template>
  <div class="backdrop">
    <div class="modal">
      <div class="content">
        <h2>{{ user.name }}</h2>
        <p>{{ user.email }}</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Modal',
    props: ['user'] // 這邊就可以接收到 props
  }
</script>

其實觀念都跟 React 差不多，只是寫法有點不太一樣而已。