[ Vue.js ] Provide & Inject 를 사용하여 prop보내기

📌componet1을 자식 컴포넌트로 등록한 App.vue

 

 

 

📌componet1은 componet2를 componet2는 componet3을 자식 컴포넌트로 등록

 

→  마지막 자식 컴포넌트인 componet3에서 상위 부모컴포넌트인 App.vue의 prop을 받는 방법으로 , App.vue부터componet3.vue 까지 한 단계씩 prop을 전달하는 방법이 있지만, 이 방법은 번거로움으로 provide & inject 을 사용해서 prop을 보낸다. 

 

 

 

 

 

Provide & Inject 를 사용하여 prop 넘겨주기

✔ provide : 데이터를 넘겨주는 쪽에서 사용(부모컴포넌트)

✔ inject : 데이터를 넘겨 받을 곳에서 사용(자식컴포넌트)

 

---

📌 App 컴포넌트에서 provide에 prop으로 보낼 변수명과 데이터 담기

→  provide는 메소드 형식으로 작성,  변수명 : this.데이타명 

 

 

📌prop을 받을 자식 컴포넌트에서 inject 사용하여 값 꺼내기

→ inject : ['넘어온provide이름'] 형식으로 작성하고 provide이름으로 꺼내서 값을 출력한다.

 

 

참고 : 유튜브 데브리 vue3 강좌