[Vue] $emit & $props

$emit 이벤트 내보내기

• 하위 컴포넌트에서 상위 컴포넌트로 데이터 전달 또는 트리거 목적으로 이벤트를 내보낼 수 있다

// Child.vue
<template>
  <button @click="$emit('clickEvent')" />
</template>


// parent.vue
<template>
  <Child @clickEvent="sayHello" />
</template>

<script>
    const sayHello = () => {
          alert("Hello");
    }
</script>

이런식으로 하위(자식) 컴포넌트에서 발생시킨 이벤트를 상위(부모)컴포넌트로 호출을 할 수 있다.

추가적으로 파라미터도 같이 담아서 이벤트를 발생 시킬 수 있다.

// Child.vue
<template>
  <button @click="$emit('clickEvent', 'minki')" />
</template>


// parent.vue
<template>
  <Child @clickEvent="sayHello" />
</template>

<script>
    const sayHello = (userName) => {
          alert("Hello" + userName);
    }
</script>

props

• 하위 컴포넌트에서 상위 컴포넌트에게서 받아 올 데이터를 선언하면 해당 데이터를 가져 올 수 있다.

// parent.vue
<template>
  <Child :name="'minki'" :height="175"/>
</template>

// Child.vue
<template>
  <div>
      <p>{{ name }}</p> // minki
    <span>{{ height }}</span> // 175
  </div>
</template>

export default {
    props : {
        name : {
          type : String, // 속성 타입 선언
          default : ""
        },
          height : {
            type : Number,
              default : 0
        }
    }
}

props 로 받아온 데이터는 단방향 바인딩으로 하위 컴포넌트에서 데이터를 업데이트하면 에러가 난다.
반드시 상위 컴포넌트로 데이터를 업데이트 해야한다