<div id="readability-page-1" class="page"><div><div><p><a rel="noopener" href="/?source=post_page-----135e6f3c0cf8--------------------------------"><img alt="Dongmin Jang" src="https://miro.medium.com/fit/c/56/56/1*RBfR8MoT_zPwbzfWAGb0gw.jpeg" width="28" height="28"></a></p></div><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1920/1*1u5JLIroGbZ39SJPwp9Ccw.jpeg" width="960" height="826" role="presentation"></p></div><figcaption>Don’t be shy.</figcaption></figure><p id="0617">Child component (이하 Child)가 Parent component(이하 Parent)의 method를 실행하고자 할 때, 사용할 수 있는 방법이 2가지가 있다.</p><p id="a77f">하나는 prop 으로 전달하는 것이고, 다른 하나는 v-on(emit)을 이용하는 것이다.</p><pre><span id="43c9">// Parent component<br>&lt;template&gt;</span><span id="1693">  &lt;child @doParentsMethod="doSomething"&gt;&lt;/child&gt;</span><span id="4b25">&lt;/template&gt;</span><span id="3a6e">&lt;script&gt;</span><span id="52ab">export default {</span><span id="3f0b">  methods: {</span><span id="8e2d">    doSomething: function(paramsFromChild) {</span><span id="e473">      return 'return this';</span><span id="d57f">    },</span><span id="a2bb">  },</span><span id="9f64">};</span><span id="25c8"><br>// Child component<br>&lt;template&gt;</span><span id="c8ba">  &lt;button type="button" @click="$emit('doParentMethod', params)"&gt;<br>    click<br>  &lt;/button&gt;</span><span id="a273">&lt;/template&gt;</span></pre><p id="b04b">위는 emit 을 이용, 아래는 prop을 이용</p><pre><span id="165c">// Parent component<br>&lt;template&gt;</span><span id="e93f">  &lt;child :doParentMethod="doSomething"&gt;&lt;/child&gt;</span><span id="425f">&lt;/template&gt;</span><span id="c7fa">&lt;script&gt;</span><span id="76a5">export default {</span><span id="e2b4">  methods: {</span><span id="4553">    doSomething: function(params) {</span><span id="8de8">      return 'return this';</span><span id="5cdc">    },</span><span id="6ab1">  },</span><span id="7494">};<br></span><span id="bba6">// Child component<br>&lt;template&gt;</span><span id="7d37">  &lt;button type="button" @click="() =&gt; doParentMethod(params)"&gt;  <br>    click<br>  &lt;/button&gt;</span><span id="74a0">&lt;/template&gt;</span><span id="fe4e">&lt;script&gt;</span><span id="f5a6">export default {</span><span id="9a25">  props: {</span><span id="59ae">    doParentMethod: {</span><span id="3c7b">      type: Function,</span><span id="5371">      default: () =&gt; {},</span><span id="3812">    }</span><span id="a23c">  }</span><span id="5955">};</span><span id="0513">&lt;/script&gt;<br></span></pre><p id="2325">위 두가지 방식에 대한 글들을 검색해보면 몇개 나오긴 하는데, 명쾌하게 무엇이 좋다고 답을 내려주는 글은 없는 듯 하다. emit 방식이 더 좋다고 하는 글이 보이는데 마땅한 근거는 없어보인다.</p><p id="714c">개인적으로 두가지 방식에는 약간의 차이가 있다고 보고 있고, 상황에 따라서는 prop 방식을 선택해야 한다고 본다.</p><p id="4f57">emit을 선택하게 되면 코드가 간결해지는 장점이 있지만, ㅖarent에서 어떤 keyword로 이벤트를 전달하는지 명시 되어있지 않아 알 수가 없다.</p><p id="2d25">prop으<span id="rmm"><span id="rmm">로</span></span> 전달하게 되면, 코드가 좀 더 늘어나는 단점이 있지만 Parent로 부터 전달 받는 prop명이 명확하게 코드에서 드러난다. 그리고 default 나 validate를 활용할 수 있다. 그리고 추가적으로 아래와 같이 Parent method의 return 을 사용할 수 있다.</p><pre><span id="79fc">// Child component<br>&lt;template&gt;</span><span id="286d">  &lt;button type="button" @click="childMethod"&gt;<br>    click<br>  &lt;/button&gt;</span><span id="dd5c">&lt;/template&gt;</span><span id="d622">&lt;script&gt;</span><span id="1f7f">export default {</span><span id="3b82">  props: {</span><span id="46b7">    doParentMethod: {</span><span id="2010">      type: Function,</span><span id="6db0">      default: () =&gt; {},</span><span id="8fb7">    }</span><span id="6a12">  },<br>  methods: {<br>    childMethod() {<br>      const result = this.doParentMethod(params);<br>      console.log(result);</span><span id="0080">    }<br>  }</span><span id="f55c">};</span><span id="63ff">&lt;/script&gt;<br></span></pre><p id="8b13">반드시 Parent method의 return 을 사용해야 하는 경우라면 prop 방식을 사용한다. 물론 emit 방식에서도 별도의 prop을 전달 받음으로서 method의 return 값을 사용할 수 있다.</p><h2 id="109d">결론</h2><p id="feba">위와 같은 특징들을 고려하여 Parent, Child가 pair로 생성되고 단순한 관계일 때만 emit 방식으로 구현한다.</p><p id="6a6e">무언가 복잡하게 엮이는 Parent, Child 관계 또는 독립적인 component에서는 prop을 사용함으로써 전달받아야 하는 요소들을 보다 명확하게 노출시키려고 한다.</p><p id="a4a0">무엇이 꼭 맞다는 의견 보다는 개인적으로 이렇게 했을 때 유지보수가 용이했다.</p></div></div>

Stories by Dongmin Jang on Medium

[Vuejs] Which is best way to pass the Function between Props and Event(emit)?
Child component (이하 Child)가 Parent component(이하 Parent)의 method를 실행하고자 할 때, 사용할 수 있는 방법이 2가지가 있다.
하나는 prop 으로 전달하는 것이고, 다른 하나는 v-on(emit)을 이용하는 것이다.
// Parent component
<template>
  <child @doParentsMethod="doSomething"></child>
</template>
<script>
export default {
  methods: {
    doSomething: function(paramsFromChild) {
      return 'return this';
    },
  },
};
// Child component
<template>
  <button type="button" @click="$emit('doParentMethod', params)">
    click
  </button>
</template>
위는 emit 을 이용, 아래는 prop을 이용
// Parent component
<template>
  <child :doParentMethod="doSomething"></child>
</template>
<script>
export default {
  methods: {
    doSomething: function(params) {
      return 'return this';
    },
  },
};
// Child component
<template>
  <button type="button" @click="() => doParentMethod(params)">  
    click
  </button>
</template>
<script>
export default {
  props: {
    doParentMethod: {
      type: Function,
      default: () => {},
    }
  }
};
</script>
위 두가지 방식에 대한 글들을 검색해보면 몇개 나오긴 하는데, 명쾌하게 무엇이 좋다고 답을 내려주는 글은 없는 듯 하다. emit 방식이 더 좋다고 하는 글이 보이는데 마땅한 근거는 없어보인다.
개인적으로 두가지 방식에는 약간의 차이가 있다고 보고 있고, 상황에 따라서는 prop 방식을 선택해야 한다고 본다.
emit을 선택하게 되면 코드가 간결해지는 장점이 있지만, ㅖarent에서 어떤 keyword로 이벤트를 전달하는지 명시 되어있지 않아 알 수가 없다.
prop으로 전달하게 되면, 코드가 좀 더 늘어나는 단점이 있지만 Parent로 부터 전달 받는 prop명이 명확하게 코드에서 드러난다. 그리고 default 나 validate를 활용할 수 있다. 그리고 추가적으로 아래와 같이 Parent method의 return 을 사용할 수 있다.
// Child component
<template>
  <button type="button" @click="childMethod">
    click
  </button>
</template>
<script>
export default {
  props: {
    doParentMethod: {
      type: Function,
      default: () => {},
    }
  },
  methods: {
    childMethod() {
      const result = this.doParentMethod(params);
      console.log(result);
    }
  }
};
</script>
반드시 Parent method의 return 을 사용해야 하는 경우라면 prop 방식을 사용한다. 물론 emit 방식에서도 별도의 prop을 전달 받음으로서 method의 return 값을 사용할 수 있다.
결론
위와 같은 특징들을 고려하여 Parent, Child가 pair로 생성되고 단순한 관계일 때만 emit 방식으로 구현한다.
무언가 복잡하게 엮이는 Parent, Child 관계 또는 독립적인 component에서는 prop을 사용함으로써 전달받아야 하는 요소들을 보다 명확하게 노출시키려고 한다.
무엇이 꼭 맞다는 의견 보다는 개인적으로 이렇게 했을 때 유지보수가 용이했다.

[Vuejs] function props vs emit?

댓글