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的末尾有一个缺少的尖括号。

＆＃13;
＆＃13;
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')
＆＃13;
.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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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

1 个答案: