Props

<template>
  <div>
    <h3>Hey!</h3>
    <greeting :age="age"/>
    <user :age="age"/>
  </div>
</template>

<script>
import Greeting from "@/components/Greeting";
import User from "@/components/User";

export default {
  name: "App",
  components: {
    Greeting,
    User,
  },
  data() {
    return {
      age: 20
    }
  }
}
</script>

<template>
  <p>The user is {{ age }} years old</p>
</template>

<script>
export default {
  name: "User",
  props: ["age"]
}
</script>

 

부모에서 자식에게 props를 주기 위해서는 바인딩을 해야한다.

ex) :age="age" => age라는 이름의 props에 age값을 준다.

자식에서는 props에 해당하는 값을 배열안에 넣는다.