Vue3 Props

Props 내리는법

부모 컴포넌트

<script setup>
import { reactive, ref } from 'vue'
import App2 from './App2.vue'
const message = ref('hi')
const count = ref(10)
const obj = reactive({
  name: 'frank',
  id: 'abc1234',
  password: 1234
})
</script>

<template>
  <div>
    <App2 v-model:message="message" v-model:count="count" v-model:obj="obj" />
  </div>
</template>

<style lang="scss" scoped></style>


v-model로 내리려면 자식에서도 수정이 가능하다고 생각해야함
:(v-bind)로 내리면 단순히 위에서 아래로 내리는 것임

자식컴포넌트
<script setup>
const props = defineProps({
  message: String,
  count: Number,
  obj: {}
})
</script>

<template>
  <div>
    App2vue 입니다.

    <p>
      {{ message }}
      {{ count }}
      {{ obj.name }}
    </p>
  </div>
</template>

<style lang="scss" scoped></style>