[Vue] Component 2

GreetingUser.vue

<template>
  <h2>Hello {{ username }}</h2>
  <h3>오늘이 {{ numberOfVisit }} 번째 방문입니다.</h3>
  <h3>사이트 이름은 {{ siteInfo.name }}입니다</h3>
</template>
<script>
export default {
  name: "GreetingUser",
  props: {
    //username: String,
    username: {
      type: String,
      default: "user!",
    },
    numberOfVisit: {
      type: Number,
      default: 0,
    },
    siteInfo: {
      type: Object,
      default: () => {
        return { name: "-", teacher: "-" };
      },
    },
  },
};
</script>
<style scoped></style>

 

App.vue

<template>
  <div>
    <!-- 데이터를 자식 컴포넌트에서 바꿀 수 없다. -->
    <GreetingUser
      :username="username"
      :numberOfVisit="numberOfVisit"
      :siteInfo="siteInfo"
    />
    <GreetingUser username="abcd" />

    <GreetingUser />
    <button @click="changeName()">change</button>
  </div>
</template>
<script>
import GreetingUser from "./components/GreetingUser.vue";
export default {
  name: "App",
  components: { GreetingUser },
  data() {
    return {
      username: "scalper",
      numberOfVisit: 25,
      siteInfo: {
        name: "vue practice",
        teacher: "scalper",
        subject: "frontend",
      },
    };
  },
  methods: {
    changeName() {
      this.username = "Ddochi";
    },
  },
};
</script>

<style></style>