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>

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

1 个答案: