Vue.js - 이 간단한 예에서 중첩된 구성 요소를 렌더링하는 방법?

Vue.js - 이 간단한 예에서 중첩된 구성 요소를 렌더링하는 방법?

나는 길을 잃었다.다른 구성요소에 중첩된 구성요소를 어떻게 올바르게 등록하고 렌더링할 수 있는지 모르겠다.이 예제를 실행하고 콘솔에 대한 룩 링크를 클릭하십시오.부품 등록에 대한 경고가 있다.

var appLayout = {
  template: `
    <div id="app" class="container">
      <header>
        <slot name="header"></slot>
      </header>

      <slot></slot>

      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  `
}

var home = {
  template: `
    <main>
      <h3>Home</h3>
    </main>
  `
}

var about = {
  template: `
    <main>
      <nested-component></nested-component>
    </main>
  `
}

var nestedComponent = {
  template: `
    <main>
      <h3>About</h3>
    </main
  `
}

var routes = [
  {
    path: '/',
    component: home
  },
  {
    path: '/about',
    component: about
  }
]

var router = new VueRouter({
  routes
})

new Vue({
  template: '#app',
  router,
  components: {
    appLayout
  }
}).$mount('#app')

.fade-enter-active,
.fade-leave-active {
  transition-property: opacity;
  transition-duration: 0.4s;
}
.fade-enter-active {
  transition-delay: 0.2s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}

<template id="app">
  <app-layout>
    <nav slot="header">
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>

    <transition name="fade">
      <router-view></router-view>
    </transition>

    <p slot="footer">
      Copyright notice
    </p>
  </app-layout>
</template>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router.min.js"></script>

구성 요소를 사용할 때 전역으로 등록하지 않고 사용할 구성 요소를 명시적으로 나열하십시오.

var about = {
  template: `
    <main>
      <nested-component></nested-component>
    </main>
  `,
  components:{
    nestedComponent
  }
}

암호에 다른 두 개의 작은 버그;nestedComponent정의해야 할 필요가 있다. about, 그리고 당신의 끝에는 누락된 각도 브래킷이 있었다.nestedComponent.

var appLayout = {
  template: `
    <div id="app" class="container">
      <header>
        <slot name="header"></slot>
      </header>

      <slot></slot>

      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  `
}

var home = {
  template: `
    <main>
      <h3>Home</h3>
    </main>
  `
}

var nestedComponent = {
  template: `
    <main>
      <h3>About</h3>
    </main>
  `
}

var about = {
  template: `
    <main>
      <nested-component></nested-component>
    </main>
  `,
  components:{
    nestedComponent
  }
}



var routes = [
  {
    path: '/',
    component: home
  },
  {
    path: '/about',
    component: about
  }
]

var router = new VueRouter({
  routes
})

new Vue({
  template: '#app',
  router,
  components: {
    appLayout
  }
}).$mount('#app')

.fade-enter-active,
.fade-leave-active {
  transition-property: opacity;
  transition-duration: 0.4s;
}
.fade-enter-active {
  transition-delay: 0.2s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}

<template id="app">
  <app-layout>
    <nav slot="header">
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>

    <transition name="fade">
      <router-view></router-view>
    </transition>

    <p slot="footer">
      Copyright notice
    </p>
  </app-layout>
</template>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router.min.js"></script>

참조URL: https://stackoverflow.com/questions/45290114/vue-js-how-to-render-nested-component-in-this-simple-example