VueJ: 라우터 뷰를 통해 루트 요소에서 자 컴포넌트로 데이터 전달

VueJ: 라우터 뷰를 통해 루트 요소에서 자 컴포넌트로 데이터 전달

일반적으로 여러 개의 하위 구성 요소에 액세스할 수 있어야 하는 변수가 있는 경우 루트 Vue 요소의 데이터 개체에 저장한 후 속성을 통해 하위 구성 요소에 전달합니다.

그러나 최근에 vue-router를 사용하기 시작했고 루트 vue 요소에는 사용자에게 제공되는 하위 구성 요소를 제어하는 "router-view" 구성 요소만 포함되어 있습니다.

루트 요소는 다음과 같습니다(vue-cli를 사용하고 있습니다).

<template>
  <div id="app">
      <router-view></router-view>
  </div>
</template>

<script>
    export default {
        name: 'app'
    }
</script>

<style lang="scss">

</style>

그 결과 vue 라우터를 사용하기 전에 사용하던 속성을 통해 하위 컴포넌트에 변수를 전달하는 방식은 더 이상 실행 가능하지 않은 것으로 보입니다.

루트 Vue 요소에서 vue 라우터를 통해 자녀 컴포넌트로 데이터를 전달하려면 어떻게 해야 합니까?'글로벌' 변수에 접근한다는 목표를 달성하기 위해 이 접근 방식을 사용해야 합니까?

상태 관리에 Vuex를 사용하는 것에 대해 언급하는 몇 가지 스레드를 읽었습니다.배우고 사용하는 것에 대해서는 반대하지 않지만, 현 단계에서 달성하려고 하는 것에 대해서는 다소 과잉이라고 생각합니다.

EDIT(해명 질문)

자녀 컴포넌트 중 몇 개가 로컬/실가동 서버에 API 콜을 발신합니다(노드 환경에 따라 다름).또한 컴포넌트가 API 콜을 발신해야 하는 서버를 결정하기 위해 if-else 로직을 여러 번 복사하고 있습니다.그래서 루트 요소에서 "서버" 변수를 선언하고 API 호출을 해야 하는 하위 요소에게 전달하는 것이 훨씬 더 좋은 방법이라고 생각했습니다.

Vuex는 훌륭한 도구이지만 레코드 ID 등의 기본 데이터를 자녀 컴포넌트에 전달하려면 루트 소품을 검토해야 합니다.

https://router.vuejs.org/en/essentials/passing-props.html

루트 루트 소품에서는 일반적인 방법으로 자녀 컴포넌트에 소품을 선언합니다.단, 에는 같은 이름을 붙여야 합니다.이거는 루트 속성입니다.

// child component
props: ['id']

// route definition
{ path: '/item/:id', component: Item, props: true },

보다시피:id그런 다음 하위 구성요소로 전달됩니다.id소품

애플리케이션이 복잡해짐에 따라 vuex(또는 원하는 상태 관리자)를 사용하는 것이 훨씬 더 적합한 도구가 될 것입니다.여러분이 그것에 익숙해지고 정말 멋진 기술들을 배울 때, 여러분은 여러분이 놓쳤던 것을 알게 될 것입니다:)

언급URL : https://stackoverflow.com/questions/48473018/vuejs-passing-data-from-root-element-to-child-components-through-router-view