如何将变量传递给 vue.js 模板中的函数？

Question

我正在尝试使用 Vue 中的模板组件将页面标题更改为页面标题。我试图通过将所有可能的页面标题存储在header-component 文件中的数组中来做到这一点。但是，当组件加载到页面上时，我找不到传入索引的方法。

这是有问题的组件：

<template id="comp-dem-template">
    <header-component>
        <!-- Insert replacement text in here-->
        <span slot="pagetitle">
            {{ chooseTitle(index) }}
        </span>
    </header-component>
</template>

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

<style>


</style>

以及组件从哪里加载

<template>
  <div class="container">
      <logo />
      <headercomponent />
      <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
  }
}
</script>

<style>

</style>

我希望能够在我的索引页面的某处传递“0”，导致标题具有 “索引” 的文本，“1”导致 “事件” 等等。这甚至可能吗，还是我在吠叫错误的树？

Answer 1

尝试将 index 声明为 headercomponent 中的道具，如下所示：

<template id="comp-dem-template">
    <header-component>
        <!-- Insert replacement text in here-->
        <span slot="pagetitle">
            {{ title }}
        </span>
    </header-component>
</template>

<script>
module.exports = {
 template: '<h1><slot name="pagetitle">Page Title Fallback</slot></h1>',
 props:['index'],
 data:  {
   if (this.index == 0) { //use this keyword
     title: 'Index';
   }
....

并将其从父组件传递给子组件，例如：

<template>
  <div class="container">
      <logo />
      <headercomponent index="0" />
      <navbar/>
  </div>
</template>