Vue 구성 요소 간 데이터 전달, 기본

딜레마

구성 요소(React, Vue, Svelte 및 Angular) 구축을 기반으로 하는 최신 프론트 엔드 UI 프레임워크를 사용하는 경우 대규모 데이터 집약적 프로젝트에서 몇 가지 매우 좋은 이점을 얻을 수 있습니다.

반응 데이터, 데이터 변경 사항에 따라 UI가 업데이트됨

캡슐화, 구성 요소가 별도로 정의되어 있으므로 재사용할 수 있습니다.

속도 최적화, Shadow DOM 및 우수한 데이터 관리는 재렌더링의 양을 줄여서 더 빠른 성능을 제공합니다.

이 모든 풍부한 선량에도 불구하고 한 가지 큰 캐치를 얻습니다.

상태 관리, 각 구성 요소는 벽으로 둘러싸인 정원이므로 서로의 데이터를 볼 수 없습니다. 이는 많은 구성 요소가 동일한 데이터를 사용해야 하는 경우 번거로울 수 있습니다.

통신은 일반적으로 형제를 통하지 않고 부모와 자식 구성 요소 간에 발생하므로 상태 관리는 데이터가 구성 요소 트리를 통과하는 방법을 생각하는 게임이 됩니다. 어떤 사람들은 애플리케이션 수준에서 상태를 관리할 수 있는 Redux, NGRX, Vuex 및 MobX와 같은 라이브러리를 완전히 우회하지만 구성 요소의 캡슐화 및 재사용 가능성이 낮아질 수 있습니다.

이 기사에서는 Vue 구성 요소 간에 데이터를 트래버스하는 방법을 설명하고자 합니다. 먼저 우리는 항상 어떤 구성 요소가 어떤 구성 요소에 대해 말하고 있는지 생각해야 합니다.

#1 상위 => 직계 하위: Props/$attrs

부모 구성 요소에서 템플릿이 다음과 같다고 가정해 보겠습니다.

<template>

<Child/>

</template>

자식 구성 요소는 부모 템플릿에 의해 직접 렌더링되므로 이것을 직접 자식이라고 부를 것입니다. 이와 같이 Child 태그에 속성을 포함하여 정보를 전달할 수 있습니다.

<template>

<Child hello="world" v-bind:cheese="cheese"/>

</template>

여기에서 hello와 cheese의 두 가지 속성을 전달합니다. Hello는 문자열 세계를 자식 구성 요소로 직접 전달하는 것입니다. 두 번째 속성은 v-bind를 사용하여 데이터 개체에서 가져오기 때문에 이 경우에는 치즈라는 속성에 대한 데이터를 찾아 치즈라는 속성으로 자식에게 전달합니다.

이제 자식의 속성에 어떻게 액세스합니까? 기본적으로 모든 속성은 this.$attrs(속성)에 저장되므로 this.$attrs.hello 및 this.$attrs.cheese가 됩니다. 하지만 이것은 과도한 타이핑처럼 보입니다... 우리는 이것을 this.hello 및 this.cheese를 소품으로 가져옵니다. 이렇게 하려면 구성 요소 Vue 인스턴스에서 props를 선언해야 합니다.

export default {
    name: "child",
    props: ["hello", "cheese"]
}

props 속성을 추가하면 구성 요소가 속성을 예상하고 더 적은 문자로 액세스할 수 있는 곳으로 속성을 이동할 수 있습니다.

상위에서 라우터 보기로

Vue Router는 단일 페이지 애플리케이션이 다중 페이지 애플리케이션처럼 느껴지도록 만드는 훌륭한 도구이지만 데이터 전달이라는 한 가지 문제가 발생합니다. 일반적으로 구성 요소는 부모에 의해 직접 렌더링되며 거기에서 props를 전달할 수 있지만 라우터를 사용하면

 component fills the gap on where a component would be depending on the url in the url bar. 

To pass data we can use a query, how we pass down the query depends on whether we invoke the route using

 ```<router-link>```

 or push. So you can see both below where we pass some information.



```html

<router-link :to="{path: '/route', query: {hello: 'world', cheese: this.cheese}}">

푸시를 사용하여

this.$router.push({path: '/route', query: {hello: 'world', cheese: this.cheese}})

그런 다음 이 데이터는 this.$route.query에 의해 라우터가 렌더링하는 뷰에서 사용할 수 있게 됩니다.

부모에게 데이터 보내기, 이벤트 발생

구성 요소 트리 위로 데이터를 보내는 것은 종종 더 어렵습니다. Vue와 Angular에서 자식은 부모가 반응하는 동안 들을 수 있는 이벤트를 내보냅니다. 실제로 props를 통해 부모로부터 메서드를 보내는 것 외에는 내장된 방법이 없습니다.

따라서 vue에서 작동하는 방식은 자식 구성 요소가 이벤트를 내보내고 이벤트와 함께 일부 데이터를 보내는 것입니다.

export default {
    name: "Child",
    methods: {
        itHappened: function(){
            this.$emit("it", {hello: "world", cheese: this.cheese})
        }
    }
}

그러면 부모가 이벤트를 수신하고 적절하게 처리할 수 있습니다.

<template>
<Child @it="handleIt($event)">
</template>

<script>
import Child from "./Child.vue"

export default {
    name: "Parent",
    components: {
        Child
    },
    methods: {
        handleIt: function(event){
            console.log(event)
        }
    }
}

</script>

따라서 이벤트가 handleIt에 의해 기록되는 것을 볼 수 있습니다. 이벤트에는 원하는 작업을 수행할 수 있도록 전송된 데이터가 포함되어 있습니다.

결론

데이터는 구성 요소에서 구성 요소로 이동하는 것이 답답할 수 있지만 그렇게 하는 방법을 아는 것이 첫 번째 단계입니다. 또한 브라우저에 Vue devtools를 추가하는 것이 좋습니다. 그러면 구성 요소의 데이터를 언제든지 검사할 수 있으므로 끝없는 로깅 시간을 절약할 수 있습니다.