component

views > App.vue

<template>
  <b>component practice</b>
  <my-card title="MyCard" contents="MyCard Contents" :number="0"></my-card>
  <!--  number props에는 정수가 들어가야 하기 때문에 bind 시켜서 number이 아닌 :number이 되어야 한다.-->
</template>

<script>
import MyCard from "./components/MyCard";

export default {
  components: { MyCard, },
  setup() {
    return {};
  },
};
</script>

components > MyCard.vue

<template>
  {{title}}
  {{contents}}
  {{number}}

  {{contents2}}
</template>

<script>
export default {
  name: 'MyCard.vue',
  props: {
    title: String,
    contents: String,
    number: Number
  },
  setup() {
    const contents2 = 'This is 2nd contents.'
    return {
      contents2,
    }
  }
}
</script>