Vue의 상위 레이아웃에 전달되는 하위 뷰 구성 요소

Vue의 상위 레이아웃에 전달되는 하위 뷰 구성 요소

TL;DR: 부모 구성 요소에서 참조하는 구성 요소의 특정 슬롯에 콘텐츠를 전달하는 것이 가능한가?

나는 Vue Router와 함께 제공되는 Vue Webpack Template를 사용하고 있는데, 이 템플릿은 바로 사용할 수 있는 단일 페이지 애플리케이션의 기초를 제공한다.

내가 직면하고 있는 문제는 아래와 같이 단순화된 마스터 레이아웃이 있다는 것이다.

<template>
  <div id="app">
    <Nav/>
    <APageWithDifferentNav/>
  </div>
</template>

<script>
  import Home from "./components/views/Home";
  import APageWithDifferentNav from "./components/views/APageWithDifferentNav";
  import Nav from "./components/Nav";

  export default {
    name: "App",
    components: {
      Nav, Home, APageWithDifferentNav
    }
  };
</script>

그리고 항법 구성요소는 다음과 같다.

<template>
  <div class="nav">
    <ul class="nav__list">
      <li class="nav__list-item">always show this nav item</li>
    </ul>
    <slot>
      <ul class="nav__list replace-this">
        <li class="nav__list-item">only show this</li>
        <li class="nav__list-item">if no slot</li>
        <li class="nav__list-item">content provided</li>
      </ul>
    </slot>
  </div>
</template>

<script>
  export default {
    name: "Nav"
  };
</script>

실내의 슬롯을 바꿀 수 있기를 원한다.Nav구성요소, 뷰 구성요소 내에서.

예를 들어 체크아웃 또는 탑승 흐름에서 사용자에게 표시되는 탐색 옵션을 제한하고 다른 콘텐츠를 교환하여 이동 중인 위치를 강조하려는 경우

움직일 필요 없이 이렇게 할 수 있는 방법이 있을까?<Nav/>모든 페이지의 템플릿에 넣으셨나요?

나는 당신이 여기서 볼 수 있는 내가 무엇을 찾고 있는지 보여주기 위해 더 많은 코드 예를 만들었다.

어떤 도움이라도 대단히 고맙게 생각한다.

AFAIK는 부모에서 자녀에게만 슬롯 콘텐츠를 전달할 수 있다.

PortalVue를 사용하면 정의 구성 요소 외부에 DOM을 렌더링할 수 있으며 일부 구성 요소를 사용하여 비슷한 것을 얻을 수 있다.v-if기본 부품의 렌더링을 비활성화한다.

하지만 내 취향에 맞는 과설계된 해결책인 것 같아.때로는 DRY 원칙을 깨고(Don't Repeat Yourself) 모든 페이지에서 Nav 컴포넌트를 불러오는 것이 가장 좋거나, 필요한 경우 다른 탐색 기능을 가진 몇 개의 뷰에 대해 전혀 다른 페이지를 만드는 것이 가장 좋다./login,/logout... 및 최상위 수준에서 v-bind:is와 함께 동적 구성 요소를 사용하여 렌더링할 보기 구성 요소를 선택하십시오(따라서 일반 Nav 구성 요소를 사용하는 모든 일반 페이지에 대해 하나의 공통 App 구성 요소와 다른 LoginLogoutNav를 사용하는 하나 이상의 대체 LoginOutApp 구성 요소가 있음).

참조URL: https://stackoverflow.com/questions/50101672/child-view-component-pass-prop-to-parent-layout-in-vue