[Vue] Vue 정리하기(13) - 동적 컴포넌트(Dynamic Component ), 형제 컴포넌트간 데이터 전달

(vue3, pinia, vuetify 이용)

지난 글

https://moooostory.tistory.com/entry/Vue-Vue-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B012-%EB%8F%99%EC%A0%81-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8Dynamic-Component-%EC%9E%90%EC%8B%9D%EC%97%90%EC%84%9C-%EB%B6%80%EB%AA%A8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A1%9C-emit-%EC%A0%84%EB%8B%AC

[Vue] Vue 정리하기(12) - 동적 컴포넌트(Dynamic Component ), 자식에서 부모 컴포넌트로 emit 전달

에서 동적 컴포넌트에 대해 알아봤다

 

view하나에서 컴포넌트를 바꿔서 보여주는거를 저번시간에 했는데

 

오늘은 그 컴포넌트간에 데이터를 전달하는 방법에대해 알아보겠다

 

최종 목표는

 

A컴포넌트에서 B컴포넌트로 넘어갈때

A 컴포넌트에서 입력한 값을 B에 전달하고

 

B에서 C로 이동할때

B에서 입력한 값 + A에서 입력한 값을 C에 전달하고

 

C에서는 버튼을 누르면 그 입력받은 값 두개를 콘솔창에 출력할 수 있게 만들어 보겠다

 

내가 생각하기에

형제 컴포넌트간 데이터를 전달하는 방법은

3가지 정도가 있다

 

1. 이벤트 버스 

2. 스토리지 

3. 스토어 

 

이벤트 버스는 간단하긴한데 데이터가 많아지면 별로일것 같고

 

스토리지도 나쁘지 않은데 굳이 스토리지에 저장까지 하고싶지않고

 

그래서 나는 스토어에 저장하는 방법을 사용할 것이다.

 

스토어에 저장할때 단점은 새로고침하면 저장한게 날라는건데

안 날아가게 하려면 스토리지를 쓰길 바란다.

 

스토어는

import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useAppStore = defineStore('app', () => {
  const test = ref({
    value_A: '',
    value_B: '',
  })
  return {test}
})

이렇게 작성하였고

 

 

컴포넌트 A,B는 이렇게 작성하였고

 

 

C는 이렇게 작성하였다

 

 

화면은 각각 이렇게 생겼고

 

C컴포넌트에서 데이터 출력하기 버튼을 누르면

 

이처럼 콘솔창에 잘 출력되는것을 확인할 수 있다

 

부디 도움이 되셨기를~~