从父组件传递到子组件时Vue道具未定义

Question

将两个数据成员从我父母的数据方法传递到子组件的道具时遇到问题。基本上，我在父组件中设置数据值，将它们绑定到 HTML 模板中的子组件调用。然后我试图在孩子的“道具”中引用这个传递的数据。

但我一直在我的 Vue 开发工具中得到这个：

 props
   date: undefined
   title: undefined

这是我的代码：

App.vue（仅供参考。我不希望我的问题与此代码有关）

<template>
  <div id="app">
    <div id="nav">
      <Header />
    </div>
  </div>
</template>

<script>
  import Header from '@/components/Header.vue'

  export default {
    components: {
      Header
    }
  }
</script>

Home.vue（父组件）

<template>
  <div>
    <Header :title="title" :date="date" />
  </div>
</template>

<script>
// @ is an alias to /src
import Header from "@/components/Header.vue";
import moment from "moment";

export default {
  data () {
    return {
      title: "SOME NEWS",
      date: moment().format("dddd, MMMM D, YYYY") 
    }
  },
  components: {
    Header
  }
};
</script>

Header.vue（子组件）

<template>
  <div class="hello">
    <h1>{{ getTitle() }}</h1>
    <h3>{{ getDate() }}</h3>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        required: true
      },
      date: {
        type: String,
        required: true
      }
    },
    method: {
      getTitle() {
        return this.title
      },
      getDate() {
        return this.date
      }
    }
  };
</script>

Answer 1

如果我理解您的 App 组件代码正确，您应该使用 <Home /> 组件，但您使用 <Header /> 代替。示例：

<template>
  <div id="app">
    <div id="nav">
      <Home />
    </div>
  </div>
</template>

<script>
  import Home from '@/components/Home.vue'
  export default {
    components: {
      Home
    }
  }
</script>