<!-- User.vue ; 부모 컴포넌트 -->
<!-- name 데이터 객체를 UserDetail로 전달 -->
<template>
  <div class="component">
    <button @click="changeName">Change</button>
    <div class="row">
      <app-user-detail :my-name="name"></app-user-detail>
    </div>
  </div>
</template>

<script>
  import UserDetail from ...

  export default {
      data: function() {
        return {
          name: 'Max'
        };
      },
      components: {
          appUserDetail : UserDetail
      }
  }
</script>

<!-- UserDetail.vue ; 자식 컴포넌트 -->
<!-- 부모 컴포넌트에서 name 데이터를 전달받고, 이를 switchName 메소드로 처리 -->
<template>
  <div class="component">
    {% raw %}
    <p>Name: {{ switchName() }}</p>
    {% endraw %}
    <!-- myName대신 methods인 switchName pass 가능 -->
  </div>
</template>

<script>
  export default {
    props: ['myName'], // template에 있는 name과 같아야함
    methods: {
      switchName() {
        return this.myName
          .split('')
          .revers()
          .join('')
        // this 사용 가능 = props는 일반 data나 methods 처럼 취급하기 때문에 가능함
      },
    },
  }
</script>

<!-- Literal case
     아래의 경우는 숫자가 아닌 문자를 자식 컴포넌트로 전달 -->
<child new-prop="1"></child>

<!-- Dynamic case
     v-bind를 통해, 문자가 아니라 JavaScript 숫자를 전달 -->
<child :new-prop="1"></child>

<!-- 부모 컴포넌트에서 text와 isComplete라는 데이터를 가진 todo 객체 생성 -->
<!-- 여러개의 데이터를 가진 todo 객체의 이름을 생략하고, v-bind 만으로 props 생성 -->

<template>
  <todo-item v-bind="todo"></todo-item>
</template>

<script>
  export default {
    data() {
      return {
        todo: {
          text: 'new',
          isComplete: false,
        },
      }
    },
  }
</script>

<!-- 위의 template는 아래와 같은 역할 -->

<template>
  <todo-item
    v-bind:text="todo.text"
    v-bind:is-complete="todo.isComplete"
  ></todo-item>
</template>

// props value를 local variable로 정의
props: ['initialcount'],
data: function() {
	return { counter: this.initialcount }
},
// props value를 가지고 연산 수행
computed: {
    incrementCount() {
        return this.initialcount++
    }
}

props: {
	// 기본 타입은 null = 어떤 type이던 ok!
	// 숫자만 가능
	propA: Number,
	// String or Number 가능
	propB: [String, Number],
	// String이 무조건 필요
	propC: {
		type: String,
		required: true
	},
	// 기본 값 100을 가지는 Number
	propD: {
		type: Number,
		default: 100
	},
	// 객체 및 배열의 기본값은 팩토리 함수에서 반환 되어야함
	propE: {
		type: Object,
		default: function() {
			return: { message: 'hello'}
		}
	},
	// Customized 유효성 검사
	propF: {
		validator: function(value) {
			return value > 10
		}
	}
}

<!-- 부모 컴포넌트 -->
<template>
  <div class="component">
    <button @click="changeName">Change</button>
    <div class="row">
      <!-- 이벤트 청취! -->
      <app-user-detail
        :name="name"
        @nameResetted="name = $event"
      ></app-user-detail>
      <app-user-edit> </app-user-edit>
    </div>
  </div>
</template>
<!-- 이하 생략 -->

<!-- 자식 컴포넌트 -->
<template>
  <div class="component">
    <p>Name: {{ myName }}</p>
    <!-- myName대신 methods인 switchName pass 가능 -->
    <button @click="resetName">Reset</button> // Reset 버튼 추가
  </div>
</template>

<script>
  export default {
    props: {
      myName: {
        type: String,
      },
    }, // template에 있는 name과 같아야함
    methods: {
      switchName() {
        return this.myName
          .split('')
          .revers()
          .join('')
        // this 사용 가능 = props는 일반 data나 methods 처럼 취급하기 때문에 가능함
      },
      resetName() {
        this.myName = 'Max'
        this.$emit('nameResetted', this.myName) // Emit Event로 Parent 컴포넌트에 쏴주기
      },
    },
  }
</script>

<!-- .sync 사용하는 부모 컴포넌트 코드 -->
<comp :foo.sync="bar"></comp>

<!-- 위와 똑같은 역할을 하는 코드 -->
<comp :foo="bar" @update:foo="val => bar = val"></comp>

<!-- 자식 컴포넌트에서 foo를 갱신하는 코드
     속성 변경 대신, event를 emit  -->
<script>
  this.$emit('update:foo', newValue)
</script>