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作为标头组件中的道具，如下所示：

<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>

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

1 个答案: