道具可能未定义

Question

我有一个小的Vue功能组件，可以从其父级获取道具：

export default defineComponent({
  name: 'ExpandedMovieInformation',
  props: {
    movie: {
      type: Object as PropType<Movie>,
    },
  },
  setup(props, { emit }) {
    const { movie } = props;
  },
});
</script>

<template>
  <div>
    <div class='overlay'>
      <h1>{{ movie.title }}</h1>
      <span class='release-date'>{{ movie.release_date }}</span>
      <p>{{ movie.overview }}</p>
    </div>
  </div>
</template>

在父级中启动组件：

<ExpandedMovieInformation
  :movie="currentMovie" />

代码可以编译，但是在模板中我得到警告：

我该如何正确地为道具分配类型，以免不确定？

Answer 1

在制作这样的ExpandedMovieInformation列表组件时，您给movie参数的事实：

<ExpandedMovieInformation :move="currentMovie" />

并不意味着每个人都会这样做，有人可能会制造没有该属性的组件：

<ExpandedMovieInformation />

因此，该属性可能未定义。
要解决此问题，您可能需要为属性添加一个默认值，如下所示：

props: {
    movie: {
      type: Object as PropType<Movie>,
      default: {}
    },
  },