[Vue.js] props와 emit 개념 정리하기

1. props 란 ?

: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때 사용되어지는 단방향 데이터 전달 방식

2. 사용 방식

부모 컴포넌트에서 자식 컴포넌트를 호출시 자식 컴포넌트 태그 내 v-bind나 : 키워드를통해 데이터를 전달하고 자식 컴포넌트에서 props객체를 통해 데이터를 전달받는 방식이다.

1) 부모 컴포넌트

반응형

<template>
    <!--첫번째 방법-->
    <자식컴포넌트이름 :props이름="전달데이터"/>
    <!--두번째 방법-->
    <자식컴포넌트이름 v-bind:props이름="전달데이터"/>
</template>
<script>
export default {
  data() {
     전달데이터: Array
  } 
}
</script>

2) 자식 컴포넌트

<script>
export default {
    name : 'Product',
    props : {
        product : Object
    }
}
</script>

• 부모 컴포넌트에서 보내고자 하는 데이터를 디렉티브를 적어 props이름을 설정한다.
• 그리고 보내고자하는 데이터를 이곳에 보낸다.
• 그리고 자식 컴포넌트에서 이를 props로 가져온다.

3) 예시

<template>
  <div class="third">
    <PagiNation :list-array="list" />
  </div>
</template>
<script>
import PagiNation from './PagiNation.vue'
export default {
  components: {
    PagiNation
  }
}
</script>

props: {
    listArray: {
      type: Array,
      required: true
    },
    pageSize: {
      type: Number,
      required: false,
      default: 6
    }

👩🏻‍💻 알게된 점

props문법을 알게되고 나서 이를 쓸려고 vue를 만들었다. 알다싶이 props는 단방향 방식이고 변경도 불가하다. 그래서 내가 생각하려고 하는 방향이 잘 안됐다. 그래서 검색해보니 props와 많이 쓰는 문법이 존재했다.

emit

1. 개념

컴포넌트의 통신 방법 중 하위 컴포넌트에서 상위 컴포넌트로 통신하는 방식이다. 위에서 언급했듯이 상위 컴포넌트에서 전달받은 변수를 다시 하위 컴포넌트에서 상위 컴포넌트에 전달하는 것이 가능한 방식이다.

2. 사용방법

// 상위 컴포넌트의 템플릿
<div id="app">
  <child-component v-on:이벤트명="상위 컴포넌트의 실행할 메서드명">
</child-component>
</div>

// 하위 컴포넌트의 내용
this.$emit('이벤트 명');

위와 같이 설정하면 되는데 처음에 돌아가는 방식 습득하기 어렵다. 예시를 보고 따라하면 조금 쉽다.

3-1. 예시

// 상위 컴포넌트
<template>
  <div>
    <span>{{ count }}</span>
    <ChildView :count="count" @change="change" />
  </div>
</template>

<script>
import ChildView from './ChildView.vue'
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    change(value) {
      this.count = value
    }
  },
  components: { ChildView }
}
</script>

상위 컴포넌트

1. 하위 컴포넌트 가져오기 : 하위 컴포넌트에 data를 전달하기 이전에, 하위 컴포넌트를 임포트해서 가져온다.
2. data 선언 : 하위 컴포넌트에 주고자 하는 data를 선언한다.
3. 하위 컴포넌트에 전달 : v-on디렉티브를 사용하여 data명과 일치하게 변수값도 선언한다. 헷갈리기에 이렇게 선언하는 것이 좋다. (:count = count)
4. 함수 선언 : 하위 컴포넌트에서 데이터값이 변화된 것을 상위 컴포넌트에 실행하기 위해 함수를 선언해준다.

// 하위 컴포넌트
<template>
  <div>
    <div @click="increment">여기를 클릭하세요: {{ count }}</div>
  </div>
</template>

<script>
export default {
  props: ['count'],
  methods: {
    increment() {
      this.$emit('change', this.count + 1)
    }
  }
}
</script>

하위 컴포넌트

1. props로 변수 가져오기 : props로 선언한 값 가져온다.
2. 함수 선언 : 상위 컴포넌트에서 변한 변수값을 알기 위해서 함수를 선언하였다. 하위 컴포넌트에서도 div태그를 클릭시 함수를 선언한다. 그리고 여기 수정된 값을 change emit를 통해 상위 컴포넌트로 넘겨준다.
3. 상위 컴포넌트 업데이트 : count 데이터를 상위 컴포넌트로 넘겨주어 데이터를 업데이트한다.

결과값

결과값

3-2. 예시

// 상위 컴포넌트
<template>
  <div>
    <span>{{ modal }}</span>
    <ChildView :modal="modal" @change="change" />
  </div>
</template>

<script>
import ChildView from './ChildView.vue'
export default {
  data() {
    return {
      modal: false
    }
  },
  methods: {
    change(value) {
      this.modal = value
    }
  },
  components: { ChildView }
}
</script>

위의 예시와 똑같다. 그런데 이 데이터는 boolean값으로 업데이트를 하는 것이 달라 예시로 넣었다. 하는 방법은 위의 상위 컴포넌트와 일치한다.

// 하위 컴포넌트
<template>
  <div>
    <div @click="changeModal">여기를 클릭하세요: {{ modal }}</div>
  </div>
</template>

<script>
export default {
  props: ['modal'],
  methods: {
    changeModal() {
      if (!this.modal) {
        this.$emit('change', true)
      } else {
        this.$emit('change', false)
      }
    }
  }
}
</script>

하위 컴포넌트가 조금 다르다. emit를 통해 값을 변경하고자 했을 때 오류가 났다.

emit를 통해 값을 변경했을 때 나는 오류

this.modal = true
this.modal === true

위와 같이 선언하였다. 그런데 저런 오류가 나길래, true으로 선언해주니 오류가 없어지고 제대로 값을 변경해주었다.

결과값

🔗 참고

https://goodmemory.tistory.com/145

https://webruden.tistory.com/925