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

将两个数据成员从父组件的数据方法传递到子组件的道具时出现问题。基本上，我在父组件内设置数据值，将它们绑定到HTML模板内的子组件调用。然后我尝试在子'props'中引用传递的数据

但我一直在我的Vue开发工具中使用这一点：

 props
   date: undefined
   title: undefined

这是我的密码：

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

从“@/components/Header.vue”导入标头
导出默认值{
组成部分：{
标题
}
}

Home.vue（父组件）

//@是/src的别名
从“@/components/Header.vue”导入标题；
从“时刻”中导入时刻；
导出默认值{
数据（）{
返回{
标题：“一些新闻”，
日期：矩（）格式（“dddd，MMMM D，YYYY”）
}
},
组成部分：{
标题
}
};

Header.vue（子组件）

{{getTitle（）}}
{{getDate（）}}
导出默认值{
道具：{
标题：{
类型：字符串，
必填项：true
},
日期：{
类型：字符串，
必填项：true
}
},
方法：{
getTitle（）{
返回此名称
},
getDate（）{
返回此日期
}
}
};

如果我了解您在应用程序组件代码中的正确性，您应该使用

组件，但您使用

。例如：

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

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

从“@/components/Home.vue”导入主页
导出默认值{
组成部分：{
家
}
}

如果我了解您在应用程序组件代码中的正确性，您应该使用

组件，但您使用

。例如：

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

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

从“@/components/Home.vue”导入主页
导出默认值{
组成部分：{
家
}
}

你能分享一个工作示例吗？如果我有一个工作示例，我就不会发布这个问题。但我一直在我的Vue开发工具中了解到这一点：在没有工作示例的情况下会发生这种情况？我提供的代码就是我所拥有的，它不起作用，Vue开发工具（用于Chrome）显示了两个属性，title和date，未定义。您理解工作示例的含义吗？这是显示您的错误的代码，在一个环境中工作，比如代码片段/代码沙盒。您能分享一个工作示例吗？如果我有一个工作示例，我不会发布这个问题。但我一直在我的Vue开发工具中了解到这一点：这种情况在没有工作示例的情况下发生？我提供的代码就是我所拥有的，而且它不起作用，Vue开发工具（用于Chrome）显示标题和日期这两个属性未定义。您理解一个工作示例的含义吗？它是在代码段/代码沙盒等环境中显示错误的代码。主组件位于“视图”目录中，不需要在App.vue中注册。但是，我的标题组件需要显示在每个页面上，因此将其包含在App.vue中并注册为一个组件。好的，但您将标题组件包含在Home中。你们把道具从家里传到了头上，但你们家的组件并没有在任何地方使用。我现在明白你的意思了。所以App.vue应该是我的父母，而不是Home.vue。那准确吗？是的，它是正确的。请尝试在您的应用程序组件中用Home替换Header，您将看到它的工作原理。Home组件位于“视图”目录中，不需要在App.vue中注册。但是，我的标题组件需要显示在每个页面上，因此将其包含在App.vue中并注册为一个组件。好的，但您将标题组件包含在Home中。你们把道具从家里传到了头上，但你们家的组件并没有在任何地方使用。我现在明白你的意思了。所以App.vue应该是我的父母，而不是Home.vue。那准确吗？是的，它是正确的。请尝试用Home-in-your应用程序组件替换标题，您将看到它是如何工作的。

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

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

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