Vue.js - 如何在这个简单的例子中渲染嵌套组件？

Question

我迷路了。我不知道也不明白如何正确注册和渲染嵌套在其他组件中的组件。请运行此示例，单击关于链接查看控制台。有关于组件注册的警告。

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>

Answer 1

当你使用一个组件时，如果没有全局注册它，你需要明确地告诉你将该组件列为你将使用的组件。

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>