데이터전달

JavaScript Vue.js
1

안녕하세요
vue를 시작한지 얼마 안되어 곤란한 문제를 많이 격으며 배우고 있습니다.

제가 vue를 나눠놨는데
image
이런 구조로 나눠놨습니다.

제가 하고싶은건 test1.vue 에서 app.vue안에 있는 function을 실행시키고, 배열정보를 가져오고 싶습니다.

부모와 자식관계인 main.vue, test1.vue는 통신이 되는데
더 깊은관계는 어떤식으로 통신을해야하나요?

2

뎁스가 깊어질수록 props emit 구조로 모든걸 전달하고 받기 힘들어집니다. 이럴때 vuex라는 상태관리를 사용합니다. 스토어라는 폴더안에 state, actions, mutations, getters등으로 하나의 상태를 관리할 수있습니다. 예를들어 state에 item = ‘과일’ 으로 선언되어있을때, 원하는 컴포넌트에서 this.$store.state.item으로 값을 가져올 수 있습니다.만일 app > dep1 > dep1-1의 컴포넌트 구조를 갖는 경우 dep1-1의 부모 컴포넌트는 dep1입니다. 이때 dep1에서 A에 대한 액션을 디스패치하는 경우 최종적으로 A에 대한 state 정보를 dep1에서 물고 있습니다. 마찬가지로 dep1-1에서는 디스패치를 안하더라도 해당 state 정보를 사용할 수 있습니다. Rest일 경우에는 api > actions > mutations > state > (getters 생략가능) 이 순서대로 됩니다. 공통함수를 다른 곳에서 쓰고 싶은 경우는 mixins라는 것을 이용해서 해당 컴포넌트에 해당 믹스인파일을 주입해 사용할 수 있습니다. 이 때에는 mixins 폴더안에 최대한 자세하게 네이밍한 후 하나의 js파일에 한 기능만 하도록 만드는 것이 중요합니다. 예를 들어, getSamsungTv라는 이름으로 네이밍 한 후, getSamsungTv에 대한 기능만 하도록요!

2개의 좋아요
3

아 추가적으로 app.vue에서 전역으로 사용할 함수또는 변수는 공식문서에 $_ 붙여주는 것을 추천합니다. 하위 컴포넌트에서 this.$_item 으로 사용하도록요!!

4

아직 이해는 완벽히는 아니지만 주신 내용으로 구글링도 해보며 찾아봤습니다. 답변과 팁 감사합니다!!

5

안녕하세요.

더 깊은 뎁스의 컴포넌트끼리 데이터를 주고 받는 작업은 EventBus로 처리를 합니다.

윗 분께서 예시로 Vuex를 추천해주셨는데, 제가 생각하기에 큰 규모의 상태관리가 아니고 데이터 조작 및 실행이면 Event Bus를 찾아보시면 될 것 같습니다.

이는 디자인 패턴의 SIngleton과 유사한 패턴인데요.
로직을 말씀드리자면,

기존의 Vue 인스턴스를 A라고 지칭하고, 새로운 인스턴스를 B라고 지칭하겠습니다.
A의 test1.vue에서 B에 함수를 하나 등록합니다. 전역으로요. helloworld();
그리고 A의 app.vue에서 B에서 HelloWorld()를 호출합니다.