[Vue.js] Props vs Data

<Vue에서 변수를 저장하는 두 가지 방법>

Props(Property)

• 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 방식
• 컴포넌트 내에서 props를 접근하는 것은 소유하는 것을 의미하는 것은 아니므로, 값 수정은 불가능
• 리액티브(reactive)-반응형

 

Data

• 각 컴포넌트의 메모리
• 리액티브(reactive)-반응형

 

사용  예시

<template>
  <div>
    {{data}}
    <button @click="changeData">데이터 변경</button>
  </div>
</template>

<script>
export default { 
  name:"Component",
  data: function() {
    return {
      data: 1
    };
  },
  methods: {
	changeData() {
    this.data += 1;
  }
}
</script>

<style scoped></style>

• 위와 같이 사용한 data는 private이며 컴포넌트 자신만을 위해서만 사용 가능
  • 다른 컴포넌트는 접근 불가능

 

참고)

Props vs Data in Vue