Vuejs 컴퍼넌트 구성간의 적절한 통신 방법

• 
• Sugoi Ebooks(Write in English)
• Naver Cafe
• Sugoi Japanese
• Find a Job in Japan

• The proper methods for communication between vuejs components
• Vuejs(v2) 에서 컴퍼넌트 구성간의 적절한 통신 방법

The proper methods for communication between vuejs components

In Vue.js (version 2), there are several methods for communication between components.
like this,

• props
• emit/on : on, off, once are removed in Vue 3.0
• children/parent : children is removed in Vue 3.0
• attrs/listeners : listeners is removed in Vue 3.0
• ref
• root
• eventbus or (provide/ inject)
• vuex

therefore, the proper usage are as follws.

• parent-child components

  • props/ $emit/ $parent/ ref/$attrs

• Sibling components (components at the same level)

  • $parent/ $root/ eventbus/vuex

• Cross-level relationships (multiple hierarchy or complex structures)"

  • eventbus/ vuex/ provide+inject

It’s important to consider both two-component and one-to-many component structures when using these methods.

Vuejs(v2) 에서 컴퍼넌트 구성간의 적절한 통신 방법

vuejs (버젼2) 에서는 컴퍼넌트 간의 통신 방법은 아래와 같이 여러가지가 존재한다.

• props
• emit/on : on, off, once 는 Vue 3.0 에서 제거됨.
• children/parent : children 은 Vue 3.0 에서 제거됨.
• attrs/listeners : listeners 는 Vue 3.0 에서 제거됨.
• ref
• root
• eventbus or (provide/ inject)
• vuex

이것들의 적절한 사용은 아래와 같다.

• 상위-하위 구성요소 ( 부모와 자식)

  • props/ $emit/ $parent/ ref/$attrs

• 형제 구성요소 (동등한 깊이의 형제)

  • $parent/ $root/ eventbus/vuex

• 교차 수준 관계 (다중자식 구조나 복잡한 구조)

  • eventbus/ vuex/ provide+inject

이렇게 두 컴퍼넌트 혹은 1 대 다수의 컴퍼넌트 구조를 고려하며 사용하는게 중요하다.