# @Inject

dudwns

데이터를 상위 컴포넌트에서 후손 컴포넌트에게 전달하기 위해서는 중간에 전달하는 컴포넌트가 필요하다. App.vue -> Parent.vue -> Child.vue 하지만 자식의 자식의 자식의 자식... 컴포넌트에 데이터를 전달해야 한다면 이렇게 전달하는 것은 매우 비효율적일 것이다. 그렇다면 데이터를 바로 전달할 수 없을까? 이 때 사용할 수 있는 것이 provide, inject다. provide 옵션은 data옵션보다 먼저 작성해야한다. provide에 제공된 값은 App.vue 컴포넌트 내부에 후손 컴포넌트에서 언제든지 inject라는 옵션으로 가져와서 사용할 수 있다. ![](https://velog.velcdn.com/images/dudwns/post/39f3790

mero

레포지토리를 클래스 하나로만 구현한 경우 (기존) counseling.repository.ts conunseling.service.ts 서비스에서 쓰기 위한 레포지토리를 그냥 class로 구현해버리고 이렇게 service의 생성자에 해당 클래스를 박아 넣으면 이 서비스는 이 레포지토리밖에 사용하지 못한다. 이 서비스가 배포용, 테스트용, 혹은 다른 orm이나 dbms에 맞는 등 여러가지 레포지토리를 사용하게 하려면 기본 레포지토리를 interface로 구현한 후 이를 implements한 여러 레포지토리 클레스들을 만들면 좋다. counseling.module.ts 그리고 서비스와 레포지토리가 이런 경우의 모듈은 이렇게 되있을 것이다. providers에 그냥 CounselingRepository 클래스만 명시되어 있다. 이부분이 바뀔 것이다. 레포지토리를 인터페이스로 구현 후 implements하기 기본레포지토리 counseling.repo

art11010

루트 엘리먼트 접근 $root 대부분의 경우, 다른 컴포넌트에 접근하거나 직접 DOM 엘리먼트에 접근하는 것을 피하는 것이 좋다. 그럼에도 불구하고, 이러한 접근이 허용되는 경우가 있다. new Vue의 모든 하위 컴포넌트에서는 $root 속성을 이용해 루트 인스턴스에 접근할 수 있다. $parent $root와 비슷하게 $parent 속성을 사용하여 자식 요소에서 부모 인스턴스에 접근할 수 있다. 이는 props를 이용해 데이터를 넘겨주는 것의 (조금 떨어지는) 대안으로써 사용할 수 있다. 가끔 부분적으로 컴포넌트 간의 공유가

nonlyito

class 선언 내부에 @inject를 사용해야 한다. class 선언 외부에서는 사용할 수 없다.

reasonz

Vue의 자식의 자식의 자식 컴포넌트에 데이터 보내기 보통 부모에서 자식 컴포넌트로 데이터를 보낼 때 props를 사용한다. 하지만 중첩된 관계(자식의 자식의 자식.. 과 같은)라면 번거롭고 복잡해진다. components 폴더 안에 provide-inject 라는 폴더를 만들고 CompLevel1, 2, 3 세가지 vue 파일을 만들었다. 레벨1 파일의 자식은 레벨2가 되고, 레벨2 파일의 자식은 레벨3가 되도록 작성할 것이다. 각각의 CompLevel 1~3까지의 뷰 파일 작성이 완료되었으면 App.vue에서 CompLevel1 파일을 임포트 한 후 등록하고 사용해보았다. 저장하고 확인해 보면 CompLevel1~3 파일이 모두 호출이 된다. ![](https://velog.velcdn

tobo

일반적으로 데이터를 부모-자식컴포넌트 사이에 전달할 때 Props(자식에게 전달)와 Emit(부모에게 전달)을 사용한다. 특정한 두 컴포넌트사이에 중첩된 여러 컴포넌드가 있는 구조의 경우 데이터를 한번에 전달하기는 불가능아니 굉장히 번거로운 일이다.(여러번의 Props를 거쳐야 한다.) 이러한 경우 provide와 inject를 사용하여 특정 컴포넌트끼리 데이터를 주고 받을 수 있다. App의 데이터를 CompLevel3로 보내보자! output >안녕하세요 Karina입니다. Hello Karina! 이상 에스파에 카리나씨에 대해 알아봤습니다. ㅎㅎㅎ

uvula6921

vue에서는 두단계 이상 차이나는 부모와 자식 컴포넌트 간 데이터 전달을 project와 inject를 사용해 쉽게 할 수 있다. 다만, inject를 통해서 데이터를 전달받는 자식 컴포넌트에서는 데이터의 출처가 어떤 부모 컴포넌트인지 알 수 없다는 단점이 있다.

hotdari90

Prop로 내리는데는 한계가 있다. Vue 프로젝트를 진행하다보면 Prop로 데이터를 자식에게 주게된다. 하지만 자식의 손자까지 아래로 계속 내려가다보면 어느 순간 한계점에 이른다. 그래서 데이터만을 쉽게 내려줄 방법이 없을까? 라는 고민이 들기 시작했다. Provide와 Inject vue 2.2버전 업데이트 후 새로운 것이 생겼다. Provide와 Inject가 생겼고 이 둘은 데이터를 자신의 손자까지 마음껏 보내줄 수 있었다. [App.vue] [Parent.vue] [Child.vue] 정말 중간에 데이터를 쫓아가지도 않아도 된다는게 너무 기뻣다. 하지만 이것도 vue2에서는 치명적인 단점이 있었다. > Provide, Inject는 반응성이 안된다는 것이다. 부모 데이터가 변해도 Inject받은 자식은 변하지 않는다. Javascript로 해결해보자 vue는 자바스크립트이기에 해결가능할 것 같은 예상이 들었다.

hanei100

컴포넌트 - Provide, Inject 컴포넌트의 provide, inject 두 개의 키워드에 대해 살펴보도록 합시다. 더욱 자세한 사항은 공식 문서를 참고해주시기 바랍니다. 1. Provide & Inject 1.1 개념 일반적으로 데이터를 부모에서 자식 컴포넌트로 전달해야할 때 props를 사용합니다. 특정한 두 컴포넌트 사이에 깊이 중첩된 컴포넌트가