创建 Nuxt 应用时如何使用组件模板？答案

【问题标题】：How to use component templates when creating a Nuxt app?创建 Nuxt 应用时如何使用组件模板？
【发布时间】：2019-12-28 08:05:59
【问题描述】：

我正在尝试在 Nuxt 应用程序中使用 Vue 创建动态标头。然而，问题有两个方面：

1) 我无法让原始 DOM 中的模板被外部文件中的模板填充，我可以通过将整个内容制作成 .html 文件来做到这一点。我通常会为此使用 new Vue(el:...)，但是即使在 <head> 中包含最新版本后，我也无法使该解决方案起作用。

2) 我无法显示正确的数据。尝试插入文本时，我可以获取我传入的索引，否则会出错。

我试图传入的组件：

    <template id="comp-dem-template">
        <header-component>
            <!-- Should call the function in "data" then replace the title. Instead has error about how it cannot search with 'in' -->
            <span slot="pagetitle">
                {{title}}
            </span>
        </header-component>
    </template>

<script>
module.exports = {
    el: '#header-component',
    template: '<h1><slot name="pagetitle">Page Title Fallback</slot></h1>',
    props: ['index'],
    data: function () {
        if (this.index == 0){
            title: 'Index';
        }
        else if (this.index == 1){
            title: 'Events';
        }
        else if (this.index == 2){
            title: 'Policy';
        }
        else if (this.index == 3){
            title: 'Frequently Asked Questions';
        }
        else if (this.index == 4){
            title: 'Reservations';
        }
        else if (this.index == 5){
            title: 'View Reservations';
        }
        else {
            title: 'Make a Reservation';
        }
    }

}
</script>

以及我试图将其传递到的地方：

<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<template>
  <div class="container">
      <logo />
<!-- This should be replaced with <h1><span>(name)</span></h1> according to my normal HTML version, however it doesn't here -->
      <headercomponent index="0" />
      <navbar/>
  </div>
</template>

<script>
import Logo from '~/components/Logo.vue'
import headercomponent from '~/components/header-component.vue'
import navbar from '~/components/nav-bar.vue'
export default {
  components: {
    Logo,
    headercomponent,
    navbar
  }
}
// Where I would normally try to insert it. However, even using the newest vue in the head won't let me do this ('Vue is not defined')
new Vue({ el: '#comp-dem-template' })
</script>

【问题讨论】：

您没有正确定义 SFC，并且您不需要在 Nuxt 应用程序中实例化 Vue。我建议仔细阅读 Vue 和 Nuxt 文档以熟悉基础知识。如果您想先深入了解，请尝试创建sample Nuxt app，并遵循生成项目中的约定（这可能会帮助您解决您的问题）。

标签： html vue.js nuxt.js

【解决方案1】：

你的组件有很多垃圾，我们清理一下，

<template>
  <span class="header-link">
    {{ title }}
  </span>
</template>

<script>
  module.exports = {
   name: 'header-component',
   props: ['title']
  }
</script>

<style>
  .header-link {
  }
</style>

您可以使用以下方式调用它们：

<header-component title="some text" />

这样可以使代码保持清晰和简单，但是如果您绝对需要在此处发送索引值，则组件：

<template>
  <span class="header-link">
    {{ title }}
  </span>
</template>

<script>
module.exports = {
  name: 'header-component',
  props: ['index'],
  data: function() {
    return {
      title: ''
  }
},


mounted: function() {
    if (this.index === 0) {
      this.title = 'Index'
    } else if (this.index === 1) {
      this.title = 'Events'
    } else if (this.index === 2) {
      this.title = 'Policy'
    } else if (this.index === 3) {
      this.title = 'Frequently Asked Questions'
    } else if (this.index === 4) {
      this.title = 'Reservations'
    } else if (this.index === 5) {
      this.title = 'View Reservations'
    } else {
      this.title = 'Make a Reservation'
    }
  }
}
</script>

<style>
.header-link {
}
</style>

像你的例子一样使用它们

<headercomponent index="0" />

重要的部分是了解vue的生命周期，https://vuejs.org/v2/api/#Options-Lifecycle-Hooks，所以Props不是直接存在于数据中，而是存在于mounted中。

【讨论】：