[Vue] Component 1

GreetingUser.vue

<template>
  <h2>Hello {{ username }}</h2>
</template>
<script>
export default {
  name: "GreetingUser",
  props: {
    //username: String,
    username: {
      type: String,
      default: "user!",
    },
  },
};
</script>
<style scoped></style>

 

 

App.vue

<template>
  <div>
    <!-- 데이터를 자식 컴포넌트에서 바꿀 수 없다. -->
    <GreetingUser :username="username" />
    <GreetingUser username="abcd" />
    <GreetingUser username="pororo" />
    <GreetingUser username="monkey" />
    <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",
    };
  },
  methods: {
    changeName() {
      this.username = "Ddochi";
    },
  },
};
</script>

<style></style>