Question

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

1）我无法在原始DOM中获得要用外部文件中的模板填充的模板，这可以通过将整个内容制作为.html文件来完成。我通常会为此使用新的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>

Answer 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并不直接存在于数据中，而是存在于已挂载中。

创建Nuxt应用程序时如何使用组件模板？

1 个答案: