TIL. Vue.js[props전달(상하관계)]

1. 부모 컴포넌트 -> 자식 컴포넌트 props전달

vue.js에서 부모에서 자식으로의 props전달은 React.js와 흡사하다.

부모 컴포넌트 [postModifyDel.vue]

<pagination  :howManyLists="this.gotLists.length" />

=> import한 자식 컴포넌트[pagination.vue] 에 react와 마찬가지이다. howManyLists 속성을 부여 하고 그 값으로 부모컴포넌트에서 자식 컴포넌트로 전달하고 싶은 값을 " " 안에 넣어준다.

예시에서는 pagination을 구현하기 위해서 백엔드API에서 넘어오는 데어터의 길이(수)를 전달하였다.

전달하는 props가 동적일 경우 'v-bind:' 나 ':'를 해주어야하며,
정적인 경우에는 그냥 전달해도 무방하다.

다시 말하자면, howManyLists라는 이름으로 this.gotLists.length를 pagination이라는 자식 컴포넌트에 넘겨준 것 이다.

자식 컴포넌트[pagination.vue]

<script>

...

export default {
  props: { 
  // 변수 : 변수타입 
  // 기록을 해주는 이유는 데이터 타입을 알기 쉽게 위해서.
  howManyLists: Number 
  // 반드시 필요하다는 의미
  required: true,
  // 값을 전달하지 않을 경우 디폴트값 설정 가능 
  default: 10
    }
  },
   data() {
    return {
    
    ...
    

=> 자식 컴포넌트에서는 위와 같이 전달받을 props를 명시해준다.

아래는 props의 옵션을 검증하는 방법이다.(추후에 더 자세히 다룰 것이다.)

• 필수는 아니지만 전달받는 데이터의 타입을 정해준다. 데이터 타입을 알기 쉽게 하기 위함이다. 만약 타입이 다르게 전달된다면, error가 난다고 한다. (아직 많은 경우를 다뤄보지 못하여서 이 경우에 대해서는 확인해보지 못하였다.)

• required
  true 혹은 false값을 가지며, 꼭 필요한지, 꼭 필요하지는 않은지를 나타낸다고 한다.

• default
  전달받기 전까지 가지는 기본값이다.

명시해 준 후에 사용할 수 있다.

위의 방법이 아닌,

export default {
  props: [howManyLists] 
    ...
    

이렇게 간단하게 사용할 수도 있다.

2. 자식 컴포넌트 -> 부모 컴포넌트 props전달

자식 컴포넌트[pagination.vue]

...
 },
  methods: {
    clickCallback(pageNum) {
     
      // 자식 컴포넌트에서 부모 컴포넌트로 보내는 것이 $emit()
      this.$emit("child", this.page);
     ...
    },

=> $emit 를 통해 자식 컴포넌트에서 method가 실행될 때, "chlid"라는 이름으로 this.page라는 값이 부모에게 전달된다.

부모 컴포넌트 [postModifyDel.vue]

<pagination @child="parents" :howManyLists="this.gotLists.length" />

=> 부모 컴포넌트 에서는 자식 컴포넌트에서 넘긴 이름("child") 앞에 @를 붙이고 부모 컴포넌트에서 사용될 이름 ("parents")를 써준다.

이렇게 하면 부모 컴포넌트에서는 자식 한테서 넘어온 child라는 이름의 this.page라는 값을 parents라는 변수명으로 사용할 수 있다.